/* ---------- ASTRONAUTA: tre file che scorrono a destra e a sinistra, un po' ruotate, con profondità. Niente sovrapposizioni. ---------- */
/* La sezione e' una slide: griglia titolo + 3 righe che si dividono l'altezza rimasta (dietro piu' bassa, davanti piu' alta).
   Ogni immagine e' alta una frazione (--k) della sua riga: cosi' niente viene mai troncato, a qualsiasi altezza di finestra. */
.marquee{position:relative;padding:8vh 0 3vh;overflow:hidden;display:grid;grid-template-rows:auto .8fr .9fr 1fr;align-content:stretch}
.mq-title{display:block;padding:0 28px 3vh;position:relative;z-index:4}
.mq-title .giant{display:block;font-size:clamp(48px,11vw,170px)}
.mq-title small{display:block;color:var(--mute);font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}
.row{position:relative;width:100%;height:100%;min-height:0;overflow:visible;padding:0;container-type:size}
.row .track{display:flex;gap:3vw;width:max-content;height:100%;align-items:center;animation:drift var(--t,90s) linear infinite}
.row.r .track{animation-direction:reverse}
.row:hover .track{animation-play-state:paused}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq{position:relative;display:block;flex:none;height:calc(100cqh * var(--k,.85));width:calc(100cqh * var(--k,.85) * var(--r,1));overflow:hidden;transform:rotate(var(--rot,0deg));box-shadow:0 24px 50px rgba(0,70,67,.55);transition:transform .5s ease}
.mq img{height:100%;width:100%;object-fit:cover;display:block}
.mq b{position:absolute;left:12px;bottom:10px;font-family:var(--font);font-stretch:125%;font-weight:900;text-transform:uppercase;font-size:14px;color:#fff;text-shadow:2px 2px 0 rgba(0,90,86,.6);opacity:0;transition:opacity .3s}
.row.front .mq:hover{transform:rotate(0deg) scale(1.05)}
.row.front .mq:hover b{opacity:1}
@media(max-width:760px){.row .track{gap:4vw}.mq-title{padding:0 16px 2vh}.mq-title .giant{font-size:clamp(34px,10.5vw,80px)}.mq-title small{font-size:10px}.marquee{padding:80px 0 2vh}}