diff --git a/src/pages/promo-eventi/eventi.astro b/src/pages/promo-eventi/eventi.astro index 592d0fa..982872b 100644 --- a/src/pages/promo-eventi/eventi.astro +++ b/src/pages/promo-eventi/eventi.astro @@ -38,7 +38,7 @@ const pomeriggio: Gruppo[] = [ ---
diff --git a/src/pages/promo-eventi/promo.astro b/src/pages/promo-eventi/promo.astro index f08fc00..b4635dd 100644 --- a/src/pages/promo-eventi/promo.astro +++ b/src/pages/promo-eventi/promo.astro @@ -354,8 +354,12 @@ const countdownDeadline = ed ? t(tg('countdown.deadline')) : ''; .lp .faq-a .hl { color: #8A6E3F; } /* Sotto i 1000px tre colonne diventano troppo strette per un prezzo e un elenco: le cinque - card passano a due per riga (griglia a quattro, span due), con la quinta al centro. */ - @media (max-width: 1000px) and (min-width: 701px) { + card passano a due per riga (griglia a quattro, span due), con la quinta al centro. + Nessun `min-width` a chiudere la fascia in basso: a viewport frazionari (uno zoom del + browser dà larghezze come 700,5px) fra 700 e 701 non varrebbe nessuna delle due regole e + le card tornerebbero a sei colonne. Ci pensa il blocco ≤700px, che viene dopo e a pari + specificità vince. */ + @media (max-width: 1000px) { .lp .cards-5 { grid-template-columns: repeat(4, 1fr); } .lp .cards-5 .card:nth-child(4) { grid-column: span 2; } .lp .cards-5 .card:nth-child(5) { grid-column: 2 / span 2; } @@ -365,7 +369,6 @@ const countdownDeadline = ed ? t(tg('countdown.deadline')) : ''; .lp .hero, .lp .launch, .lp .why5, .lp .cards-wrap, .lp .faq-wrap { padding-left: 28px; padding-right: 28px; } .lp .cards { grid-template-columns: 1fr; } /* A una colonna gli span e le collocazioni delle ultime due card lascerebbero righe vuote. */ - .lp .cards-5 { grid-template-columns: 1fr; } .lp .cards-5 .card, .lp .cards-5 .card:nth-child(4), .lp .cards-5 .card:nth-child(5) { grid-column: auto; }