:where(.component-teaser-text) {

    container: teaserText / inline-size;

    .teaser-text-wrapper {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: 4rem;
    }

    .teaser-text-content {
        padding-left: 4rem;
        border-left: solid var(--color-brand-navy) 2px;
    }


}

@media print {
    :where(.component-teaser-text) {
        page-break-inside: avoid;

        .teaser-text-wrapper {
            grid-template-columns: 1fr;
        }

        .teaser-text-content {
            padding-left: 0;
            border-left: none;
            border-top: solid var(--color-brand-navy) 2px;
            padding-top: 2rem;
        }

        .teaser-text-header {
            text-align: left;
        }
    }
}

@container teaserText (width < 65rem) {
    :where(.component-teaser-text) {

        .teaser-text-header {
            text-align: left;
        }
        .teaser-text-wrapper {
            display: flex;
            flex-flow: column;
            gap: 2rem;
        }
        .teaser-text-content {
            padding-left: 0;
            border-top: solid var(--color-brand-navy) 2px;
            border-left: 0;
            padding-top: 2rem;
        }
    }
}