@layer genr.component {
    .textmedia__background {
        background: var(--color-dark-green);
    }

    .textmedia {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        margin: 0 auto;
        max-width: var(--width-xl);
        padding: 4rem 1.625rem 4.5rem 1.625rem;

        @media (width > 768px) {
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            gap: 3rem;
            padding: 4rem 0 8rem 0;
        }
    }

    .textmedia__content {
        color: var(--color-white);
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;

        @media (width > 768px) {
            grid-column: 3 / 11;
        }
    }

    .textmedia__header {
        grid-column: 1 / -1;
        display: inline-block;
        width: fit-content;
        padding-bottom: 1.5rem;

        & .headline {
            font-weight: bold;
            display: inline;
        }

        & h2,
        & h3,
        & h4 {
            color: var(--color-light-patrol);
        }

        & h5 {
            color: var(--color-sun-yellow);
        }

        &:has(.textmedia__highlight) {
            padding-bottom: 2.5rem;
        }

        @media (width > 768px) {
            grid-column: 3 / 11;
        }
    }

    .textmedia__intro {
        font-size: var(--font-size-base);
        line-height: 1.5;
        letter-spacing: var(--letter-spacing-xs);

        @media (width > 992px) {
            font-size: var(--font-size-md);
            line-height: 1.556;
        }
    }

    .textmedia__citation {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        padding-left: 3rem;
        border-left: 0.25rem solid var(--color-light-patrol);
    }

    .textmedia__quote {
        font-size: var(--font-size-md);
        font-style: italic;
        font-weight: 300;

        @media (width > 992px) {
            font-size: var(--font-size-xl);
        }
    }

    .textmedia__author {
        font-weight: 700;
    }

    /* .textmedia__wineyard {
    } */

    .textmedia__media {
        grid-column: 1 / -1;
    }

    .textmedia__media--small {
        @media (width > 768px) {
            grid-column: 3 / 11;
        }
    }

    .textmedia__media--large {
        @media (width > 768px) {
            grid-column: 2 / 12;
        }
    }
}