@layer components {

    .lead {
        display: grid;
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--s-5) clamp(32px, 5vw, 88px);
        align-items: center;
        margin-bottom: var(--s-9);
    }

    .lead__media {
        aspect-ratio: 3 / 2;
        overflow: hidden;
        border-radius: var(--r-1);
        background: var(--c-tile);
    }

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

    .lead:hover .lead__img {
        transform: scale(1.025);
    }

    .lead__body {
        display: grid;
        justify-items: start;
        gap: var(--s-3);
    }

    .lead__title {
        font-size: var(--t-2xl);
    }

    .lead__text {
        max-width: 48ch;
        font-size: var(--t-md);
        color: var(--c-muted);
    }

    @media (max-width: 899px) {
        .lead {
            grid-template-columns: minmax(0, 1fr);
            margin-bottom: var(--s-8);
        }
    }

}