/* =================================================================== WEBINARS GRID section css =================================================================== */
.webinars-grid {
    padding-block: var(--sectionGap) 0;

    & .webinars-grid__bar {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: var(--sp20);
        margin-bottom: var(--sp40);
        padding-bottom: var(--sp20);
        border-bottom: 1px solid var(--line);
    }

    & .webinars-grid__heading { font-size: var(--f28); }

    & .webinars-grid__count {
        font-size: var(--f14);
        font-weight: 600;
        color: var(--muted);
    }

    & .webinars-grid__list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--g30);
    }

    /* the newest replay leads the archive as a wide feature card */
    & .webinars-grid__list > .webinar-card:first-child {
        grid-column: 1 / -1;
        flex-direction: row;

        & .webinar-card__media { flex: 0 0 58%; aspect-ratio: auto; min-height: 380px; }
        & .webinar-card__body { justify-content: center; padding: var(--sp50); }
        & .webinar-card__title { font-size: var(--f32); }
        & .webinar-card__text { -webkit-line-clamp: 5; font-size: var(--f16); }
        & .btn-link { margin-top: var(--sp10); }
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 991.98px) {
    .webinars-grid {
        & .webinars-grid__list > .webinar-card:first-child {
            flex-direction: column;
            & .webinar-card__media { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
            & .webinar-card__body { padding: var(--sp30); }
        }
    }
}

@media (max-width: 575.98px) {
    .webinars-grid {
        & .webinars-grid__list { grid-template-columns: 1fr; }
        & .webinars-grid__list > .webinar-card:first-child .webinar-card__body { padding: var(--sp25) var(--sp20); }
    }
}