:where(.component-content-tabs) {
    container: contentTabs / inline-size;

    .content-tabs-wrapper {
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        gap: var(--size-medium);
    }

    .heading {
        line-height: 1;
    }

    .headline-line-1 {
        font-size: 3rem;
    }

    .headline-line-2 {
        font-size: 18rem;
        line-height: 0.85;
    }

    .headline-line-3 {
        font-size: 3rem;
    }

    .content-tab-button {
        &.active {
            --button-style-background-color: var(--color-brand-navy);
            --button-style-color: var(--color-primary-white);
        }

        &:focus-visible {
            outline: 3px solid var(--color-brand-navy);
            outline-offset: 4px;
        }
    }

    .content-tabs-copy {
        max-width: 42rem;
        justify-self: flex-end;
        margin-right: 19rem;

        h2, h3, h4, h5, h6 {
            font-family: var(--font-family-heading);
            color: var(--color-primary-black);
        }
    }

    .content-tabs-single-image {
        width: 100%;
        height: 100%;
    }

    .content-tabs-images {
        margin-top: var(--size-small);
        align-items: flex-end;

        img {
            border-radius: 2.5rem;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

}

@media print {
    :where(.component-content-tabs) {
        .content-tabs-wrapper {
            grid-template-columns: 1fr;
        }

        .content-tab-button {
            display: none !important;
        }

        .content-tabs-copy {
            max-width: 100%;
            margin-right: 0;

            & > * {
                display: block !important;
            }
        }

        .content-tabs-images {
            display: none !important;
        }

        .headline-line-2 {
            font-size: 5rem;
        }
    }
}

@container contentTabs (width < 120rem) {
    .component-content-tabs {

        .content-tabs-wrapper {
            grid-template-columns: 1fr 1fr;
        }

        .content-tabs-copy {
            margin-right: 0;
            margin-left: 4rem;
            justify-self: flex-start;
        }

        .headline-line-2 {
            font-size: 10rem;
        }
    }
}

@container contentTabs (width < 95rem) {
    .component-content-tabs {

        .content-tabs-wrapper {
            grid-template-columns: 1fr;
            gap: var(--size-small);
        }

        .headline-line-2 {
            font-size: 7rem;
        }

        .content-tabs-copy {
            justify-self: flex-start;
            margin-block: var(--size-small) 0;
            margin-right: 0;
        }

        .content-tabs-images {
            align-self: flex-start;
        }
    }
}

@container contentTabs (width < 45rem) {
    .component-content-tabs {
        .headline-line-2 {
            font-size: 5rem;
        }
    }
}