/* pagina Chi siamo */
.about-hero{padding:64px 32px 4px;text-align:center}
.about-mark{width:104px;height:104px;object-fit:contain;display:block;margin:0 auto 26px}
.about-hero h1{font-size:clamp(30px,4.4vw,46px);line-height:1.15;max-width:780px;margin:14px auto 20px}
.about-hero p.lead{font-size:17px;color:var(--slate);max-width:620px;margin:0 auto;line-height:1.7}

.about-wrap{max-width:700px;margin:0 auto;padding:44px 32px 0}
.about-wrap p{color:var(--slate);font-size:16.5px;line-height:1.85;margin-bottom:22px}
.about-wrap p:last-child{margin-bottom:0}
.about-wrap p.first::first-letter{font-family:var(--serif);font-size:3.1em;line-height:.86;float:left;padding:6px 10px 0 0;color:var(--terracotta)}

.about-sign{margin-top:34px!important;font-family:var(--serif);font-style:italic;font-size:18px!important;line-height:1.6!important;color:var(--terracotta-dark)!important;text-align:right}

/* Il filo e la foto stanno sulla stessa colonna del testo (700 -
   64 di respiro = 636 px), non rientrati come prima.

   Con la foto vecchia, quasi quadrata, i 560 px funzionavano: il
   rientro la faceva leggere come un oggetto appoggiato sotto al
   racconto. Quella nuova e' panoramica, e alla stessa larghezza
   diventava una striscia alta 364 px sotto un testo largo 636:
   sembrava rimpicciolita per sbaglio.

   Allineata al testo occupa 636x466 e chiude la pagina invece di
   restarci sotto. Sul telefono le due colonne coincidevano gia'. */
.about-rule{max-width:700px;margin:44px auto 0;padding:0 32px}
.about-rule span{display:block;height:1px;background:linear-gradient(90deg,transparent,var(--sage),transparent)}

.about-family{max-width:700px;margin:40px auto 96px;padding:0 32px}
.about-family figure{margin:0}
.about-family img{width:100%;height:auto;display:block;border-radius:12px;box-shadow:0 30px 70px -40px rgba(46,58,55,.5)}
.about-family figcaption{margin-top:14px;text-align:center;font-size:13.5px;color:var(--slate);font-style:italic}


@media(max-width:640px){
  .about-hero{padding:44px 24px 4px}
  .about-mark{width:84px;height:84px}
  .about-wrap{padding:32px 24px 0}
  .about-rule{padding:0 24px}      /* stessa colonna di testo e foto */
  .about-family{padding:0 24px}
}