@layer components {

    .teasers {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--s-7) var(--s-5);
    }

    .teaser {
        display: grid;
        align-content: start;
        gap: var(--s-2);
    }

    .teaser__media {
        display: block;
        aspect-ratio: 4 / 3;
        margin-bottom: var(--s-3);
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

    .teaser__img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform var(--dur-3) var(--ease);
    }

    .teaser:hover .teaser__img {
        transform: scale(1.03);
    }

    .teaser__meta {
        font-size: var(--t-xs);
        letter-spacing: var(--track-caps);
        text-transform: uppercase;
        color: var(--c-muted);
    }

    .teaser__title {
        font-size: var(--t-xl);
        line-height: 1.12;
    }

    .teaser:hover .teaser__title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
    }

    .teaser__text {
        max-width: 44ch;
        color: var(--c-muted);
    }

    @media (max-width: 899px) {
        .teasers {
            grid-template-columns: minmax(0, 1fr);
        }
    }

}