.bobdo-pro-blocks-block--media-tabs__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px 32px;
}

@media (min-width: 992px) {
    .bobdo-pro-blocks-block--media-tabs__inner {
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto 1fr;
        gap: 30px 80px;
    }
    
    .bobdo-pro-blocks-block--media-tabs__header,
    .bobdo-pro-blocks-block--media-tabs__tabs {
        grid-column: 1;
    }
    
    .bobdo-pro-blocks-block--media-tabs__header {
        grid-row: 1;
    }

}

.bobdo-pro-blocks-block--media-tabs__tabs-wrapper {
    order: 2;
}

.bobdo-pro-blocks-block--media-tabs__tabs {
    --color-active: var(--color-accent);
    --color-inactive: var(--color-text-neutral);
    --transition: 400ms ease;

    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 992px) {
    .bobdo-pro-blocks-block--media-tabs__tabs-wrapper {
        grid-row: 2;
        order: 0;
    }
}

.bobdo-pro-blocks-block--media-tabs__tab {
    transition: opacity var(--transition), max-height var(--transition);
}

.bobdo-pro-blocks-block--media-tabs__tab:not(.is-active) {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
}

.bobdo-pro-blocks-block--media-tabs__tab,
.bobdo-pro-blocks-block--media-tabs__tab * {
    transition: color var(--transition);
}

.bobdo-pro-blocks-block--media-tabs__tab:not(.is-active),
.bobdo-pro-blocks-block--media-tabs__tab:not(.is-active) * {
    color: var(--color-inactive);
}

.bobdo-pro-blocks-block--media-tabs__tab.is-active,
.bobdo-pro-blocks-block--media-tabs__tab.is-active * {
    color: var(--color-active);
}

@media (min-width: 992px) {
    .bobdo-pro-blocks-block--media-tabs__tab {
        position: relative;
        padding: 1.25rem 0;
    }
    
    .bobdo-pro-blocks-block--media-tabs__tab:not(:last-child) {
        border-bottom: 1px solid var(--color-inactive);
    }

    .bobdo-pro-blocks-block--media-tabs__tab:first-child {
        padding-top: 0;
    }

    .bobdo-pro-blocks-block--media-tabs__tab:last-child {
        padding-bottom: 0;
    }

    .bobdo-pro-blocks-block--media-tabs__tab.is-active {
        color: var(--color-active);
    }

    .bobdo-pro-blocks-block--media-tabs__tab:not(.is-active) {
        opacity: 1;
        visibility: visible;
        max-height: unset;
        overflow: unset;
    }

    .bobdo-pro-blocks-block--media-tabs__tab.is-active {
        position: relative;
    }

    .bobdo-pro-blocks-block--media-tabs__tab::before {
        content: "";
        position: absolute;
        left: -36px;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 16px;
        height: 30px;
        background-color: transparent;
        -webkit-mask-image: url(/wp-content/themes/bobdo-pro-theme/assets/img/icon-chevron-right.svg);
        mask-image: url(/wp-content/themes/bobdo-pro-theme/assets/img/icon-chevron-right.svg);
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        mask-size: 100% 100%;
        -webkit-mask-size: 100% 100%;
        mask-position: center;
        -webkit-mask-position: center;
        transition: background-color var(--transition);
    }

    .bobdo-pro-blocks-block--media-tabs__tab:first-child::before {
        top: calc(50% - 0.6rem);
    }

    .bobdo-pro-blocks-block--media-tabs__tab:last-child::before {
        top: calc(50% + 0.6rem);
    }
    
    .bobdo-pro-blocks-block--media-tabs__tab:hover::before {
        background-color: var(--color-inactive);
    }

    .bobdo-pro-blocks-block--media-tabs__tab.is-active::before,
    .bobdo-pro-blocks-block--media-tabs__tab.is-active:hover::before {
        background-color: var(--color-active);
    }
    
    .bobdo-more-link:hover::before {
        -webkit-transform: scaleX(1);
            -ms-transform: scaleX(1);
                transform: scaleX(1);
    }
}

@media (min-width: 992px) {
    .bobdo-pro-blocks-block--media-tabs__media-slider {
        grid-column: 2;
        grid-row: 1 / -1;
    }
}

.bobdo-pro-blocks-block--media-tabs__media picture,
.bobdo-pro-blocks-block--media-tabs__media img {
    height: 100%;
    object-fit: cover;
}

.bobdo-pro-blocks-block--media-tabs .btns-wrapper {
    margin-top: 1.25rem;
}

@media (min-width: 992px) {
    .bobdo-pro-blocks-block--media-tabs .btns-wrapper {
        margin-top: 2rem;
    }
}

.bobdo-pro-blocks-block--media-tabs.bobdo-bg-dark .bobdo-pro-blocks-block--media-tabs__tabs {
    --color-active: var(--color-text-light);
}

.bobdo-pro-blocks-block--media-tabs.bobdo-bg-accent .bobdo-pro-blocks-block--media-tabs__tabs {
    --color-active: var(--color-text-dark);
    --color-inactive: var(--color-text-neutral);
}