.tabbed-content{
    margin: var(--block-margin) auto;
    max-width: var(--wide-width);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.tabbed-content.animate__animated{
    animation-name: fadeIn;
}

.tabbed-content-image{
    display: none;
}

.tabbed-content-image-panel{
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s linear;
    grid-column: 1;
    grid-row: 1;
}

.tabbed-content-image-panel.active{
    opacity: 1;
    pointer-events: all;
}

.tabbed-content-button{
    display: block;
    font: var(--font-elevated-1);
    border-bottom: 0.2rem solid transparent;
    opacity: 0.5;
    padding: 1rem 0;
    min-height: calc(((var(--base-font-size) * var(--font-multiplier-pow-4)) * var(--secondary-line-height)) + 2.2rem);    
    width: 100%;
}

.tabbed-content-button:is(:hover, :focus, :active){
    outline: none;
    opacity: 1;
}

.tabbed-content-button.active{
    font: var(--font-headline-3);
    font-weight: 400;
    border-bottom-color: var(--accent-color);
    opacity: 1;
    padding: 1rem 0;
}

.tabbed-content-panel-inner{
    padding: var(--item-row-gap) var(--item-column-gap);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tabbed-content-panel-inner img{
    max-width: calc(100% + (2 * var(--item-column-gap)));
    margin: calc(var(--item-row-gap) * -1) calc(var(--item-column-gap) * -1) var(--item-row-gap);
    aspect-ratio: 2;
    object-fit: cover;
}

.tabbed-content-panel-inner a{
    margin-top: auto;
}

.tabbed-content-panel-inner > *:last-child{
    margin-bottom: 0;
}

@media (max-width: 991px){
    .tabbed-content-panel{
        display: none;
    }

    .tabbed-content-panel.active{
        display: block;
    }
}

@media (min-width: 992px){
    .tabbed-content{
        --left-column-width: calc((var(--wide-width) / 3) + ((100% - var(--wide-width)) / 2));
        --right-column-width: calc( ((var(--wide-width) / 3) * 2) + ((100% - var(--wide-width)) / 2));
        --right-column-inner-width: calc( ((var(--wide-width) / 3) * 2)  - (var(--column-gap) / 2) );

        grid-template-columns: var(--left-column-width) var(--right-column-width);
        grid-template-rows: minmax(0, 1fr) max-content;
        max-width: 100%;
        margin: 0;
    }

    .tabbed-content-image{
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-column: 1;
        grid-row: 1 / span 2;
        justify-self: end;
        margin-right: calc(var(--row-gap) / 2);
        position: relative;
        width: 100%;
        max-width: calc(78.6rem - (var(--row-gap) / 2));
    }

    .tabbed-content-image:not(:has(img)){
        display: none;
    }

    .tabbed-content-image img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .tabbed-content-header{
        grid-column: 2;
        padding-top: calc(var(--block-margin) * 2);
        margin-left: calc(var(--row-gap) / 2);
        align-self: end;
        width: calc((var(--right-column-inner-width) / 2));
        margin-bottom: var(--item-row-gap);
    }

    .tabbed-content-image:not(:has(img)) ~ .tabbed-content-header{
        grid-column: 1 / span 2;
        width: var(--wide-width);
        margin-left: auto;
        margin-right: auto;
        padding-top: 0;
    }

    .tabbed-content-main{
        grid-column: 2;
        grid-row: 2;
        margin-left: calc(var(--row-gap) / 2);
        display: grid;
        grid-template-columns: calc(((var(--right-column-inner-width) / 5) * 2) - (var(--column-gap) / 2)) minmax(0, 1fr);
        column-gap: var(--column-gap);
    }

    .tabbed-content-image:not(:has(img)) ~ .tabbed-content-main{
        grid-column: 1 / span 2;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        max-width: var(--wide-width);
    }

    .tabbed-content-main::after{
        content: '';
        display: block;
        min-height: var(--item-row-gap);
    }

    .tabbed-content-panel{
        grid-column: 2;
        grid-row: 1 / span 100;
        opacity: 0;
        pointer-events: none;
        transition: all 0.3s linear;
    }

    .tabbed-content-panel.active{
        opacity: 1;
        pointer-events: all;
    }
    
    .tabbed-content-panel-inner{
        max-width: calc(((var(--right-column-inner-width) / 5) * 3) - (var(--column-gap) / 2));
    }

    .tabbed-content-image:not(:has(img)) ~ .tabbed-content-main .tabbed-content-panel-inner{
        max-width: var(--right-column-inner-width);
    }

    .tabbed-content-panel-inner img{
        display: none;
    }
}