.coach-grid {
    counter-reset: coach;
}

.coach {
    counter-increment: coach;
    position: relative;
}

.coach::after {
    content: counter(coach, decimal-leading-zero);
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    background: rgba(10, 10, 10, .82);
    color: var(--cream);
    font: 600 .68rem 'DM Sans', sans-serif;
    letter-spacing: .08em;
    backdrop-filter: blur(6px);
}

.coach img {
    filter: saturate(.88) contrast(1.03);
    transition: transform .5s ease, filter .5s ease;
}

.coach:hover img {
    filter: saturate(1) contrast(1.03);
}

.coach-lead {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1.08fr .92fr;
    background: var(--black);
    color: var(--cream);
}

.coach-lead .coach-media {
    min-height: 100%;
}

.coach-lead img {
    height: 100%;
    aspect-ratio: auto;
}

.coach-lead .coach-copy {
    justify-content: flex-end;
    padding: 2.25rem;
}

.coach-lead .coach-role {
    color: var(--gold);
}

.coach-lead h3 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
}

.coach-lead p {
    color: rgba(245, 240, 225, .67);
    font-size: 1rem;
}

[hidden] {
    display: none !important;
}

@media (max-width: 640px) {
    .coach-lead {
        grid-column: auto;
        display: flex;
    }

    .coach-lead img {
        height: auto;
        aspect-ratio: 4 / 3;
    }

    .coach-lead .coach-copy {
        padding: 1.3rem;
    }

    .coach-lead h3 {
        font-size: 2rem;
    }

    .coach-lead p {
        font-size: .92rem;
    }
}