/* Componente webinar-lista (webinar, v2 #61). Solo tokens de style.css.
 * La banda y el título son de `seccion`; cada punto, una `tarjeta` de shell
 * con su icono (sus estilos no se repiten aquí). Aquí solo la rejilla: una
 * columna en estrecho y una por tarjeta (tres como mucho) desde 768px, todas
 * del mismo alto. Las tarjetas entran una tras otra (data-pf-escalonar en la
 * lista: el motor anima los <li>, no la tarjeta, que tiene su propia
 * transición al pasar). */

.pf-webinar-lista__items {
    display: grid;
    gap: var(--pf-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 768px) {
    .pf-webinar-lista__items {
        grid-auto-columns: minmax(0, 1fr);
        grid-auto-flow: column;
        gap: var(--pf-space-lg);
    }
}

.pf-webinar-lista__item {
    display: flex;
    min-width: 0;
}

.pf-webinar-lista__item > .pf-tarjeta {
    flex: 1;
}