/* Fiorella Bertino. Foglio di stile principale.
   La tipografia sta in fonts.css, che va caricato prima di questo.
   Palette e scala da Projects/Bertino/brand/design-system.md nel vault. */

:root {
  --nero:      #000000;
  --bianco:    #FFFFFF;
  --rosso:     #942827;  /* campionato dal poster e dalle bottiglie rosse Sole */
  --blu-ardesia: #3C5064; /* campionato dalla barra "SOLE LABEL EDITION" del catalogo */

  --sole-rosso:  #942827;  /* rosso di marca, dal poster: hover e card collezioni */

  /* Pallino "sole" per varieta', campionati dalle foto bottiglia vere in
     _originali/bertino/foto vini/linea sole. Prima erano valori letti a
     vista dal catalogo. Nebbiolo e Merlot NON sono lo stesso rosso. */
  --sole-terracotta: #BF440B;  /* Nebbiolo */
  --sole-rossovino:  #C02A12;  /* Merlot */
  --sole-blu:        #3A4985;  /* Barbera */
  --sole-verde:      #556B38;  /* Chardonnay Oak, Arneis */
  --sole-turchese:   #0087A7;  /* Pinot Grigio */
  --sole-rosa:       #F193BE;  /* Rose */

  --grigio-caldo: #F5F4F2;
  --grigio-testo: #4A4A48;
  --grigio-linea: #9E9690;

  --sp:    clamp(56px, 8vw, 128px);
  --bordo: clamp(20px, 6vw, 80px);
  --max:   1280px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bianco);
  color: var(--nero);
  font-family: var(--f-sans);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

.contenuto { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--bordo); }

/* ---------- Tipi ricorrenti ---------- */

.occhiello {
  font-family: var(--f-marchio);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--grigio-testo);
}
.su-nero .occhiello { color: rgba(255,255,255,.72); }

.frase {
  font-family: var(--f-marchio);
  font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.2;
}

.testo-lungo { max-width: 62ch; }
.testo-lungo p { margin-top: 1.1em; }
.testo-lungo p:first-child { margin-top: 0; }

/* ---------- Simboli SVG (onde e pallino) ---------- */
/* Il pattern a onde e' l'elemento grafico piu' riconoscibile del marchio:
   il profilo delle colline. Un solo <symbol>, richiamato con <use> e colorato
   con currentColor, cosi' cambia colore insieme al pallino "sole" senza
   duplicare il disegno. */

.pallino {
  display: inline-block;
  width: .62em;
  height: .62em;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- Testata ---------- */

.testata {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--bordo);
  background: var(--nero);
  color: var(--bianco);
}
.testata__marchio { display: block; }
.testata__marchio svg {
  width: 108px;
  height: auto;
  color: var(--bianco);
}
.navigazione {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(14px, 3vw, 36px);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.navigazione a:hover { color: var(--sole-rosso); }
.lingue { display: flex; gap: 8px; opacity: .85; }
.lingue [aria-current] { border-bottom: 1px solid currentColor; }

/* Hamburger: nascosto di default, compare solo sotto i 680px (vedi media
   query in fondo al file), dove la navigazione inline non ci sta piu'. */
.testata__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.testata__hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--bianco);
  transition: transform .2s ease, opacity .2s ease;
}
.testata__hamburger--attivo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.testata__hamburger--attivo span:nth-child(2) { opacity: 0; }
.testata__hamburger--attivo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Apertura / Hero ---------- */

/* Sfondo vero fornito da Eliana (hero.png/.webp): colline, sfumatura e sole
   sono gia' nel file, non ricostruiti in CSS.
   La sezione ha la stessa proporzione esatta del file (2400x1350 = 16:9):
   cosi' "cover" non deve mai ritagliare ne' lasciare bordi, perche' il
   contenitore e l'immagine hanno sempre la stessa forma, a qualunque
   larghezza di schermo. Se l'immagine cambia, deve restare 16:9. */
.apertura {
  position: relative;
  aspect-ratio: 2400 / 1350;
  background-color: var(--nero);
  background-image: url('../img/hero.png');
  background-image: image-set(
    url('../img/hero.webp') type('image/webp'),
    url('../img/hero.png') type('image/png')
  );
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--bianco);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
  padding: var(--sp) var(--bordo);
}

/* Spostato piu' in alto rispetto al centro esatto della sezione: in
   percentuale, cosi' resta nella stessa posizione relativa a qualunque
   larghezza di schermo (la sezione ha una proporzione fissa, vedi sopra). */
.apertura__dentro { position: relative; z-index: 1; transform: translateY(-8%); }

.apertura__marchio {
  position: relative;
  display: inline-block;
  width: clamp(280px, 46vw, 640px);
  color: var(--bianco);
}
.apertura__marchio svg { width: 100%; height: auto; }

/* ---------- Fascia angoli ---------- */
/* "Langhe · Piemonte" / "Vini · Premium": nel poster stanno sull'etichetta,
   qui passano nella striscia chiara appena sotto l'hero invece che in
   overlay sul nero, cosi' restano leggibili senza competere col disegno. */

.fascia-angoli {
  display: flex;
  justify-content: space-between;
  padding-block: 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--grigio-testo);
  border-bottom: 1px solid var(--grigio-linea);
}
.fascia-angoli__punto {
  display: inline-block;
  font-size: 1.6em;
  line-height: 0;
  position: relative;
  top: .06em;
}

.rivendicazione {
  font-family: var(--f-vino);
  font-style: italic;
  font-size: clamp(28px, 4vw, 44px);
  padding-block: clamp(40px, 6vw, 72px) 0;
  text-align: center;
}

/* ---------- Posizionamento ---------- */

.posizionamento {
  padding-top: clamp(32px, 5vw, 64px);
  padding-bottom: var(--sp);
}
.posizionamento__lead {
  font-family: var(--f-vino);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px);
  margin-bottom: 18px;
}
.posizionamento .testo-lungo {
  max-width: 68ch;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.7;
}

/* ---------- Collezioni ---------- */

.collezioni { padding: var(--sp) 0; background: var(--grigio-caldo); }
.collezioni__intro { max-width: 60ch; margin-top: 10px; margin-bottom: var(--sp); }

.collezioni__griglia {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 20px;
}
.collezioni__piccole {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.carta {
  background: var(--bianco);
  border: 1px solid var(--grigio-linea);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 220px;
  position: relative;
}
.carta__nome {
  font-family: var(--f-vino);
  font-size: clamp(18px, 2vw, 22px);
  margin-top: 10px;
}
.carta__vai {
  margin-top: 14px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .16em;
}

.carta--sole {
  background: #E8E1D7;
  border-color: #BAB4AC;
  color: var(--nero);
  min-height: 420px;
  padding: 40px;
}
.carta--sole .carta__nome { font-size: clamp(26px, 3vw, 34px); }
.carta--sole .occhiello { color: rgba(0,0,0,.6); }

.carta--piccola { min-height: 250px; padding: 22px; }
.carta--piccola .carta__nome { font-size: 17px; }

/* Insieme delle bottiglie della collezione: sta sopra al testo, appoggiato
   sulla stessa linea di sinistra. Altezza fissa e larghezza automatica cosi'
   le bottiglie sono alte uguale in tutte le card, che sono di larghezza
   diversa. Il fondo bianco delle foto e' stato reso trasparente, quindi si
   appoggiano sul colore dell'edizione. */
.carta__insieme {
  height: 145px;
  width: auto;
  max-width: 100%;
  /* .carta e' un flex column: senza align-self l'immagine viene stirata a
     tutta larghezza e `contain` la rimpicciolisce, sballando l'altezza. */
  align-self: flex-start;
  object-fit: contain;
  object-position: bottom left;
  margin-bottom: 20px;
}
.carta--sole .carta__insieme { height: 240px; margin-bottom: 28px; }

/* Ogni card piccola porta il colore di base della sua edizione originale,
   non quello di Sole: si incorniciano, non si ridipingono (vedi design-system.md). */
.carta--historical { background: #FBF7EE; border-color: #D8CBB0; }
.carta--classica    { background: #FBF7EE; border-color: #D8CBB0; }
.carta--farmers     { background: #FBF7EE; border-color: #D8CBB0; }
.carta--artisanal   { background: #FBF7EE; border-color: #D8CBB0; }

/* ---------- Storia (teaser) ---------- */

.storia-teaser {
  background: var(--nero);
  color: var(--bianco);
  padding: var(--sp) 0;
}
.storia-teaser .contenuto {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.storia-teaser__foto {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
}
.storia-teaser .occhiello { color: rgba(255,255,255,.72); }
.storia-teaser__anni {
  font-family: var(--f-marchio);
  font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  margin-top: 8px;
}
.storia-teaser__cta { margin-top: 22px; font-size: 12px; text-transform: uppercase; letter-spacing: .16em; }

/* ---------- Dove trovarci (teaser) ---------- */

.dove-teaser {
  padding-block: var(--sp);
  text-align: center;
}
.dove-teaser .testo-lungo { margin-inline: auto; }
.dove-teaser__cta {
  display: inline-block;
  margin-top: 26px;
  padding: 14px 32px;
  background: var(--rosso);
  color: var(--bianco);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
}
.dove-teaser__cta:hover { background: #7a201f; }

/* ---------- Testata di pagina (sotto-pagine) ---------- */
/* Banner semplice per le pagine che non sono la home: occhiello + titolo.
   Di default nero come l'hero; le collezioni diverse da Sole usano la loro
   palette originale (vedi design-system.md), non si ridipingono di nero. */

.testata-pagina {
  background: var(--nero);
  color: var(--bianco);
  padding: var(--sp) 0 calc(var(--sp) * .6);
  text-align: center;
}
.testata-pagina .occhiello { color: rgba(255,255,255,.72); }
.testata-pagina__titolo {
  font-family: var(--f-marchio);
  font-weight: 900;
  font-size: clamp(34px, 6vw, 64px);
  margin-top: 8px;
  text-transform: uppercase;
}
.testata-pagina__intro {
  margin: 20px auto 0;
  max-width: 62ch;
  font-size: clamp(16px, 1.6vw, 19px);
}

.testata-pagina--historical { background: #F5EDD8; color: #2E2418; }
.testata-pagina--historical .occhiello { color: #7A1515; }

/* Avorio campionato dalle etichette vere (mediana di Bianco, Arneis, Cortese,
   Dolcetto, Rosso: #E9E4D3 - #ECE5D1). Il nero di prima descriveva solo Barolo
   e Barbaresco, 2 referenze su 14. L'occhiello e' il bronzo della stampa oro
   delle due etichette nere, scurito per leggersi sull'avorio. */
.testata-pagina--classica { background: #EBE4D0; color: #2E2418; }
.testata-pagina--classica .occhiello { color: #6E5A34; }

.testata-pagina--farmers { background: #EFE3C8; color: #2E2418; }
.testata-pagina--farmers .occhiello { color: #7A1515; }

.testata-pagina--artisanal { background: #FBF7EE; color: #2E2418; }
.testata-pagina--artisanal .occhiello { color: #4B7A4E; }

/* ---------- Griglia vini (pagine collezione) ---------- */

/* Solo padding verticale: la scorciatoia `padding` azzererebbe anche quello
   laterale di .contenuto, e su mobile le schede toccherebbero i due bordi. */
.vini-sezione { padding-block: var(--sp); }
.vini-griglia {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin-top: var(--sp);
}
/* Farmers Wine ha solo tre vini: le colonne elastiche di .vini-griglia
   li spingerebbero a sinistra lasciando vuoto a destra. Colonne di
   larghezza fissa piu' justify-content li accorpano al centro invece
   di stirarli. Solo per griglie corte, non per Sole/Historical/Classica
   dove le colonne devono riempire tutta la riga. */
.vini-griglia--centrata {
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  justify-content: center;
}
.vino {
  border: 1px solid #EAE5DC;
  display: flex;
  flex-direction: column;
}
/* Lo sfondo bianco non e' decorativo: le foto bottiglia sono scontornate su
   bianco, quindi qualunque altro colore lascerebbe un rettangolo visibile. */
.vino__foto {
  aspect-ratio: 3 / 4;
  background: var(--bianco);
  overflow: hidden;
}
.vino__foto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vino__corpo { padding: 18px 20px 22px; }
.vino__nome {
  font-family: var(--f-vino);
  font-size: 19px;
}
.pallino--riga { margin-right: .5em; }
.vino__denominazione {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grigio-testo);
  margin-top: 4px;
}
.vino__nota {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--grigio-testo);
}

/* Farmers Wine: una colonna per vino, il racconto della carta sopra e la
   scheda bottiglia sotto, cosi' ogni testo sta allineato al suo vino invece
   che in un blocco unico prima della griglia. Su mobile resta una colonna
   flex normale: testo e bottiglia dello stesso vino, uno via l'altro. */
.farmer-colonna {
  display: flex;
  flex-direction: column;
}
.farmer-colonna .carta-racconto {
  margin-bottom: 28px;
}

/* Da qui in su c'e' spazio per tre colonne affiancate: i tre racconti hanno
   lunghezze diverse, quindi senza aiuto le tre bottiglie partirebbero ad
   altezze diverse (quella col testo piu' corto piu' in alto). Sciolto
   .farmer-colonna con `display:contents` cosi' racconto e bottiglia
   diventano celle dirette di questa griglia, su due righe vere: la riga dei
   racconti si alza all'altezza del testo piu' lungo e tutte e tre le
   bottiglie iniziano insieme sulla riga sotto, indipendentemente da quanto
   testo ha ciascuna. */
@media (min-width: 860px) {
  .vini-griglia--farmers {
    grid-template-columns: repeat(3, minmax(220px, 320px));
    row-gap: clamp(32px, 5vw, 56px);
  }
  .farmer-colonna { display: contents; }
  .farmer-colonna:nth-child(1) > * { grid-column: 1; }
  .farmer-colonna:nth-child(2) > * { grid-column: 2; }
  .farmer-colonna:nth-child(3) > * { grid-column: 3; }
  .vini-griglia--farmers .carta-racconto {
    grid-row: 1;
    align-self: start;
    margin-bottom: 0;
  }
  .vini-griglia--farmers .vino {
    grid-row: 2;
    align-self: start;
  }
}

/* Barra a sinistra nel colore della carta (campionato dalle foto bottiglia,
   vedi design-system.md). */
.carta-racconto {
  border-left: 3px solid;
  padding-left: clamp(20px, 3vw, 32px);
}
.carta-racconto__chiusa {
  font-family: var(--f-vino);
  font-style: italic;
  margin-top: 14px;
  color: var(--grigio-testo);
}

/* ---------- Timeline (storia) ---------- */

/* Solo padding verticale: la scorciatoia `padding` azzererebbe il padding
   laterale che .timeline eredita da .contenuto (le due classi stanno sullo
   stesso <section>), e i testi finirebbero attaccati ai bordi. Stesso
   difetto che aveva .vini-sezione. */
.timeline { padding-block: var(--sp); }
.timeline__tappa {
  display: grid;
  grid-template-columns: 160px 1px 1fr;
  gap: 28px;
  padding-block: 36px;
  border-top: 1px solid var(--grigio-linea);
}
.timeline__tappa:first-child { border-top: 0; }
.timeline__anno {
  font-family: var(--f-marchio);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 38px);
}
.timeline__titolo-tappa {
  margin-top: 4px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--grigio-testo);
}
.timeline__linea {
  background: var(--grigio-linea);
  width: 1px;
}
.timeline__testo { max-width: 62ch; }
.timeline__citazione {
  margin-top: 14px;
  font-family: var(--f-vino);
  font-style: italic;
}
.timeline__chiusura {
  margin-top: var(--sp);
  padding-top: var(--sp);
  border-top: 1px solid var(--grigio-linea);
  max-width: 68ch;
  font-size: clamp(18px, 1.8vw, 21px);
}

/* ---------- Bio ---------- */

.bio {
  background: var(--grigio-caldo);
  padding: var(--sp) 0;
}
.bio__firma {
  margin-top: 24px;
  font-family: var(--f-vino);
  font-style: italic;
  font-size: 20px;
}

/* ---------- Fascia fotografica ---------- */
/* Sta fuori da .contenuto, quindi prende tutta la larghezza della finestra:
   e' un respiro tra due blocchi di testo, non un contenuto da leggere. Da
   telefono passa a 3:2, perche' una striscia 21:9 alta ottanta pixel non
   direbbe niente. */

.fascia-foto {
  width: 100%;
  /* Serve height:auto: gli attributi width e height nel tag valgono come
     stile e fisserebbero l'altezza a 1067px, lasciando `aspect-ratio` senza
     effetto. Gli attributi restano perche' evitano il salto di layout
     mentre la foto arriva. */
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 680px) {
  .fascia-foto { aspect-ratio: 3 / 2; }
}

/* ---------- Contatti ---------- */
/* Al posto del form: telefono, ufficio e email in chiaro, ognuno con la sua
   etichetta piccola sopra. Niente nomi di persona su questo sito. */

.contatti { list-style: none; margin-top: 14px; }
.contatti li { margin-top: 18px; }
.contatti li:first-child { margin-top: 0; }
.contatti__voce {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grigio-testo);
  margin-bottom: 4px;
}
.contatti a {
  font-size: clamp(18px, 2vw, 22px);
  border-bottom: 1px solid var(--grigio-linea);
}
.contatti a:hover { color: var(--sole-rosso); border-color: currentColor; }

.dove-griglia {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
@media (max-width: 720px) {
  .dove-griglia { grid-template-columns: 1fr; }
}

/* La mappa e' un riquadro di OpenStreetMap e non di Google: cosi' non
   entrano cookie di terze parti e il sito resta senza banner. Il grigio
   sotto si vede finche' le tessere non sono arrivate. */
.dove-mappa {
  margin-top: var(--sp);
  aspect-ratio: 16 / 9;
  background: var(--grigio-caldo);
  overflow: hidden;
}
.dove-mappa iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.dove-mappa__nota {
  margin-top: 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--grigio-testo);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.dove-mappa__nota a { border-bottom: 1px solid var(--grigio-linea); }
.dove-mappa__nota a:hover { color: var(--sole-rosso); border-color: currentColor; }

@media (max-width: 640px) {
  .timeline__tappa { grid-template-columns: 1fr; gap: 8px; }
  .timeline__linea { display: none; }
}

/* ---------- Piede ---------- */

.piede {
  background: var(--nero);
  color: rgba(255,255,255,.7);
  padding: var(--sp) 0 40px;
}
.piede .contenuto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px;
}
.piede__marchio {
  font-family: var(--f-marchio);
  font-weight: 700;
  color: var(--bianco);
  font-size: 16px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.piede__sigillo {
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .6;
}
.piede address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
}
.piede__lingue { margin-top: 18px; display: flex; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
/* Riga legale: la societa' e' Ciabot 1896 S.a.s., in pagina siglata Tenuta
   Bertino perche' il sito non nomina Ciabot (decisione del 18/08). Stessa
   scelta fatta per Enolabel con "Tenute di Famiglia". */
.piede__legale {
  margin-top: 16px;
  font-size: 12px;
  letter-spacing: .04em;
  opacity: .55;
}
/* ---------- Reattivita' ---------- */

/* Sotto i 680px la navigazione inline non ci sta piu' (si vedeva andare
   a capo su due righe): diventa un pannello a tendina aperto dall'hamburger,
   vedi assets/js/nav.js per il toggle. */
@media (max-width: 680px) {
  .testata__hamburger { display: flex; }
  /* Da telefono il wordmark in barra e il wordmark dell'hero sono lo stesso
     disegno a pochi centimetri di distanza: a 108px competevano. A 80px la
     barra resta leggibile e l'hero torna a essere l'unico marchio grande. */
  .testata__marchio svg { width: 80px; }
  .navigazione {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px var(--bordo) 28px;
    background: var(--nero);
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .navigazione.navigazione--aperta { display: flex; }
  .navigazione .lingue { margin-top: 4px; }
}

@media (max-width: 860px) {
  .collezioni__griglia { grid-template-columns: 1fr; }
  .collezioni__piccole { grid-template-columns: 1fr 1fr; }
  .storia-teaser .contenuto { grid-template-columns: 1fr; }
  .storia-teaser__foto { order: -1; }
}
@media (max-width: 560px) {
  .collezioni__piccole { grid-template-columns: 1fr; }
  .fascia-angoli { font-size: 10px; letter-spacing: .14em; }
}