/* ============================================================
   Juan XXIII 4D — ficha de propiedad
   Paleta derivada de la fotografía real de la terraza (brand.json)
   Tipografía autoalojada: Petrona (display) + Figtree (cuerpo)
   ============================================================ */

:root{
  /* Ground: corteza — el marrón profundo del propio material fotográfico */
  --corteza:      #1a1713;
  --corteza-2:    #241f1a;
  --corteza-3:    #2f2822;
  /* Tintas */
  --hueso:        #efebe3;
  --hueso-tenue:  #c3bbac;
  --hueso-debil:  #938b7d;
  /* Acentos — ocre de los muros, herrumbre del otoño de la terraza */
  --ocre:         #d9a441;
  --ocre-claro:   #e8be6d;
  --herrumbre:    #c26244;
  --musgo:        #7d8a5c;
  /* Sección clara: piedra caliza, no crema */
  --piedra:       #e4e1d8;
  --piedra-2:     #d8d4c9;
  --piedra-linea: #c2bdaf;
  /* Líneas sobre oscuro */
  --linea:        #3a322a;
  --linea-suave:  #2b2520;

  --max: 1180px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --r: 2px;
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth }
section[id], main[id]{ scroll-margin-top:calc(66px + 1rem) }
/* enlace de salto al contenido */
.saltar{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--ocre); color:#20180a; padding:.7rem 1.1rem; font-family:Figtree, sans-serif; font-weight:600; font-size:.875rem; text-decoration:none }
.saltar:focus{ left:0 }
main:focus{ outline:none }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }

body{
  margin:0;
  background:var(--corteza);
  color:var(--hueso);
  font-family:Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:Petrona, "Iowan Old Style", Georgia, serif;
  font-weight:600;
  margin:0;
  line-height:1.06;
  letter-spacing:-0.022em;
  text-wrap:balance;
}
p{margin:0}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* ---------- utilidades ---------- */
.env{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter) }
.seccion{ padding-block:clamp(4.5rem, 10vw, 8.5rem) }
.eyebrow{
  font-family:Figtree, sans-serif; font-size:.688rem; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ocre);
}
.eyebrow--oscuro{ color:#8f3f26 }
.plomo{ color:var(--hueso-tenue) }
.num{ font-variant-numeric:tabular-nums }

/* Escala tipográfica: 13 · 15 · 17 · 21 · 28 · 40 · 60 · 92 */
.t-display{ font-size:clamp(2.9rem, 8.2vw, 5.75rem) }
.t-h2{ font-size:clamp(2rem, 4.6vw, 3.25rem) }
.t-h3{ font-size:clamp(1.35rem, 2.3vw, 1.75rem) }
.t-lead{ font-size:clamp(1.05rem, 1.7vw, 1.3rem); line-height:1.55 }
.medida{ max-width:62ch }

/* ---------- navegación ---------- */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:60;
  background:rgba(26,23,19,.82);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--linea-suave);
}
.nav__in{
  display:flex; align-items:center; gap:1.5rem;
  min-height:66px;
}
.marca{ display:flex; align-items:baseline; gap:.55rem; text-decoration:none; margin-right:auto }
.marca__n{ font-family:Petrona, serif; font-weight:700; font-size:1.06rem; letter-spacing:-.01em }
.marca__c{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--hueso-debil) }
.nav__links{ display:flex; gap:1.65rem; list-style:none; margin:0; padding:0 }
.nav__links a{
  text-decoration:none; font-size:.875rem; font-weight:500; color:var(--hueso-tenue);
  padding-block:.35rem; border-bottom:1px solid transparent; transition:color .2s, border-color .2s;
}
.nav__links a:hover{ color:var(--hueso); border-bottom-color:var(--ocre) }
.nav__tel{ display:none }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:Figtree, sans-serif; font-size:.875rem; font-weight:600; letter-spacing:.005em;
  padding:.72rem 1.4rem; border-radius:var(--r); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .2s, color .2s, border-color .2s, transform .2s;
}
.btn--ocre{ background:var(--ocre); color:#20180a; border-color:var(--ocre) }
.btn--ocre:hover{ background:var(--ocre-claro); border-color:var(--ocre-claro) }
.btn--linea{ background:transparent; color:var(--hueso); border-color:#5a4f43 }
.btn--linea:hover{ border-color:var(--hueso); background:rgba(239,235,227,.06) }
.btn--oscuro{ background:var(--corteza); color:var(--hueso); border-color:var(--corteza) }
.btn--oscuro:hover{ background:var(--corteza-3); border-color:var(--corteza-3) }
.btn--grande{ padding:.95rem 1.9rem; font-size:.95rem }

.hamb{
  display:none; background:none; border:1px solid var(--linea); color:var(--hueso);
  width:42px; height:42px; border-radius:var(--r); cursor:pointer; align-items:center; justify-content:center;
}
.hamb svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.7; fill:none }

/* ---------- hero ---------- */
.hero{ position:relative; min-height:min(88dvh, 780px); display:flex; align-items:flex-end; overflow:hidden }
.hero__foto{ position:absolute; inset:0 }
.hero__foto img{ width:100%; height:100% !important; object-fit:cover; object-position:center 58% }
.hero__velo{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(18,15,12,.95) 0%, rgba(18,15,12,.80) 40%, rgba(18,15,12,.52) 70%, rgba(18,15,12,.60) 100%);
}
.hero__in{ position:relative; width:100%; padding-block:clamp(2.5rem, 6vw, 4.5rem) }
.hero__kicker{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; margin-bottom:1.35rem }
.chip{
  font-size:.7rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase;
  padding:.3rem .7rem; border:1px solid rgba(239,235,227,.3); border-radius:var(--r); color:var(--hueso);
  background:rgba(26,23,19,.35);
}
.chip--ocre{ border-color:var(--ocre); color:var(--ocre) }
.hero h1{ margin-bottom:1.1rem }
.hero h1 em{ font-style:normal; color:var(--ocre) }
.hero__sub{ max-width:46ch; color:var(--hueso-tenue); font-size:clamp(1rem,1.6vw,1.2rem) }
.hero__acc{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem }

/* rail de cifras */
.rail{ border-top:1px solid var(--linea); border-bottom:1px solid var(--linea); background:var(--corteza-2) }
.rail__in{ display:grid; grid-template-columns:repeat(4, 1fr) }
.rail__c{ padding:1.6rem 0; border-right:1px solid var(--linea) }
.rail__c:last-child{ border-right:0 }
.rail__k{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--hueso-debil); margin-bottom:.4rem }
.rail__v{ font-family:Petrona, serif; font-size:clamp(1.5rem,3.1vw,2.1rem); font-weight:600; line-height:1 }
.rail__u{ font-family:Figtree, sans-serif; font-size:.8rem; color:var(--hueso-tenue); margin-top:.3rem }

/* ---------- intro ---------- */
.intro__grid{ display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); gap:clamp(2rem,6vw,5rem); align-items:start }
.intro__texto h2{ font-size:clamp(1.75rem, 3.1vw, 2.5rem) }
.intro__texto p + p{ margin-top:1.15rem }
.lista-raya{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.1rem }
.lista-raya li{
  display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:baseline;
  padding-block:.78rem; border-top:1px solid var(--linea);
}
.lista-raya li:last-child{ border-bottom:1px solid var(--linea) }
.lista-raya dt,.lista-raya .k{ color:var(--hueso-tenue); font-size:.92rem }
.lista-raya .v{ font-weight:500; text-align:right }

/* ---------- espacios (split alterno) ---------- */
.espacio{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,4vw,3.5rem); align-items:center }
.espacio + .espacio{ margin-top:clamp(4rem,9vw,7.5rem) }
.espacio__foto{ grid-column:1 / span 7; position:relative }
.espacio__txt{ grid-column:8 / span 5 }
.espacio--inv .espacio__foto{ grid-column:6 / span 7; order:2 }
.espacio--inv .espacio__txt{ grid-column:1 / span 5; order:1 }
.espacio__foto img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:var(--r) }
.espacio__foto figcaption{ margin-top:.7rem; font-size:.8rem; color:var(--hueso-debil) }
.espacio__n{ font-family:Petrona,serif; font-size:.95rem; color:var(--ocre); display:block; margin-bottom:.9rem }
.espacio h3{ margin-bottom:.9rem }
.espacio__txt p{ color:var(--hueso-tenue) }
.par{ display:grid; grid-template-columns:1fr 1fr; gap:.65rem; margin-top:.65rem }
.par img{ width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; border-radius:var(--r) }

/* ---------- galería ---------- */
.galeria{ background:var(--corteza-2); border-block:1px solid var(--linea) }
.gal__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr)); gap:.6rem; margin-top:2.5rem }
.gal__b{ padding:0; border:0; background:none; cursor:pointer; position:relative; border-radius:var(--r); overflow:hidden }
.gal__b img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .35s ease, opacity .25s }
.gal__b:hover img{ transform:scale(1.045); opacity:.9 }
.gal__b:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:90; background:rgba(14,12,10,.95); display:grid; place-items:center; padding:clamp(1rem,4vw,3rem) }
.lb[hidden]{ display:none !important }
.lb__img{ max-width:min(1200px, 94vw); max-height:82dvh; object-fit:contain; border-radius:var(--r) }
.lb__pie{ margin-top:.9rem; text-align:center; font-size:.85rem; color:var(--hueso-tenue) }
.lb__x,.lb__p,.lb__n{
  position:absolute; background:rgba(239,235,227,.08); border:1px solid rgba(239,235,227,.22);
  color:var(--hueso); width:46px; height:46px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; transition:background-color .2s;
}
.lb__x:hover,.lb__p:hover,.lb__n:hover{ background:rgba(239,235,227,.2) }
.lb__x{ top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem) }
.lb__p{ left:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%) }
.lb__n{ right:clamp(.5rem,2vw,2rem); top:50%; transform:translateY(-50%) }
.lb svg{ width:20px; height:20px; stroke:currentColor; stroke-width:1.8; fill:none }

/* ---------- sección clara (ficha + calculadora) ---------- */
.claro{ background:var(--piedra); color:var(--corteza) }
.claro h2,.claro h3{ color:var(--corteza) }
.claro .plomo{ color:#5d5749 }
.claro .lista-raya li{ border-color:var(--piedra-linea) }
.claro .lista-raya .k{ color:#5d5749 }
.ficha__grid{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(2rem,5vw,4.5rem); align-items:start; margin-top:3rem }
.porconf{
  font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#7a4a1e; background:#e9d7b4; border:1px solid #cdab74;
  padding:.1rem .4rem; border-radius:var(--r); margin-left:.4rem; white-space:nowrap;
}

/* calculadora */
.calc{ background:var(--corteza); color:var(--hueso); border-radius:var(--r); padding:clamp(1.5rem,3vw,2.25rem) }
.calc h3{ color:var(--hueso) }
.calc__campos{ display:grid; gap:1.15rem; margin-top:1.5rem }
.campo{ display:grid; gap:.45rem }
.campo__top{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem }
.campo label{ font-size:.82rem; color:var(--hueso-tenue) }
.campo output{ font-family:Petrona,serif; font-size:1.05rem; font-weight:600; color:var(--ocre); font-variant-numeric:tabular-nums }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:3px; background:var(--linea); border-radius:99px; cursor:pointer }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:19px; height:19px; border-radius:50%; background:var(--ocre); border:0; cursor:pointer }
input[type=range]::-moz-range-thumb{ width:19px; height:19px; border-radius:50%; background:var(--ocre); border:0; cursor:pointer }
input[type=range]:focus-visible{ outline:2px solid var(--ocre); outline-offset:4px }
.calc__out{ margin-top:1.75rem; padding-top:1.35rem; border-top:1px solid var(--linea); display:grid; gap:.1rem }
.calc__fila{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-block:.6rem }
.calc__fila + .calc__fila{ border-top:1px solid var(--linea-suave) }
.calc__k{ font-size:.87rem; color:var(--hueso-tenue) }
.calc__v{ font-family:Petrona,serif; font-weight:600; font-size:1.18rem; font-variant-numeric:tabular-nums }
.calc__v--alto{ font-size:1.5rem; color:var(--ocre) }
.calc__nota{ margin-top:1.1rem; font-size:.76rem; color:var(--hueso-debil); line-height:1.5 }

/* ---------- edificio ---------- */
.amen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:.1rem; margin-top:2.5rem; border-top:1px solid var(--linea) }
.amen__i{ display:flex; align-items:flex-start; gap:.8rem; padding:1.1rem .25rem; border-bottom:1px solid var(--linea) }
.amen__i svg{ width:19px; height:19px; stroke:var(--ocre); stroke-width:1.5; fill:none; flex:none; margin-top:.22rem }
.amen__i span{ font-size:.94rem }

/* ---------- barrio ---------- */
.barrio{ position:relative; overflow:hidden }
.barrio__foto{ position:absolute; inset:0 }
.barrio__foto img{ width:100%; height:100% !important; object-fit:cover }
.barrio__velo{ position:absolute; inset:0; background:linear-gradient(105deg, rgba(18,15,12,.93) 0%, rgba(18,15,12,.82) 46%, rgba(18,15,12,.38) 100%) }
.barrio__in{ position:relative }
.barrio__cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,4rem); align-items:end; margin-top:2.5rem }
.cerca{ list-style:none; margin:0; padding:0 }
.cerca li{ display:flex; justify-content:space-between; gap:1rem; padding-block:.72rem; border-top:1px solid rgba(239,235,227,.16); font-size:.94rem }
.cerca li:last-child{ border-bottom:1px solid rgba(239,235,227,.16) }
.cerca .d{ color:var(--hueso-debil) }
.mapa{
  display:block; position:relative; border:1px solid var(--linea); border-radius:var(--r);
  overflow:hidden; text-decoration:none; background:var(--corteza-2);
}
.mapa img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; opacity:.5; transition:opacity .3s }
.mapa:hover img{ opacity:.68 }
.mapa__cap{ position:absolute; inset:auto 0 0 0; padding:1rem 1.15rem; display:flex; align-items:center; gap:.6rem; background:linear-gradient(to top, rgba(18,15,12,.95), transparent) }
.mapa__cap svg{ width:18px; height:18px; stroke:var(--ocre); stroke-width:1.6; fill:none; flex:none }
.mapa__cap span{ font-size:.87rem; font-weight:500 }

/* ---------- FAQ ---------- */
.faq{ margin-top:2.75rem; border-top:1px solid var(--linea) }
.faq details{ border-bottom:1px solid var(--linea) }
.faq summary{
  cursor:pointer; list-style:none; padding-block:1.25rem; padding-right:2.5rem; position:relative;
  font-family:Petrona,serif; font-size:clamp(1.05rem,1.8vw,1.22rem); font-weight:600; line-height:1.3;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:""; position:absolute; right:.35rem; top:1.65rem; width:11px; height:11px;
  border-right:1.6px solid var(--ocre); border-bottom:1.6px solid var(--ocre);
  transform:rotate(45deg); transition:transform .25s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); top:1.9rem }
.faq summary:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px }
.faq__r{ padding-bottom:1.45rem; color:var(--hueso-tenue); max-width:72ch }
.faq__r p + p{ margin-top:.8rem }

/* ---------- contacto ---------- */
.contacto{ background:var(--corteza-2); border-top:1px solid var(--linea) }
.cont__grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,4.5rem); align-items:start }
.form{ display:grid; gap:1.05rem; margin-top:1.5rem }
.form label{ display:block; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--hueso-debil); margin-bottom:.45rem }
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea,.form select{
  width:100%; font:inherit; font-size:.95rem; color:var(--hueso);
  background:var(--corteza); border:1px solid var(--linea); border-radius:var(--r);
  padding:.75rem .9rem; transition:border-color .2s;
}
.form textarea{ resize:vertical; min-height:92px }
.form input[type=text]:focus,.form input[type=tel]:focus,.form input[type=email]:focus,.form textarea:focus,.form select:focus{ outline:none; border-color:var(--ocre); box-shadow:0 0 0 1px var(--ocre) }
.consent input:focus,.consent input:focus-visible{ outline:2px solid var(--ocre); outline-offset:3px }
.form__2{ display:grid; grid-template-columns:1fr 1fr; gap:1.05rem }
.consent{ display:flex; gap:.7rem; align-items:flex-start; font-size:.84rem; color:var(--hueso-tenue); line-height:1.5 }
.consent input{ margin-top:.25rem; width:17px; height:17px; flex:none; accent-color:var(--ocre); cursor:pointer }
.consent a{ color:var(--ocre) }
.form__err{ font-size:.82rem; color:#eda08a; min-height:1.2em }
.tarjeta-cont{ border:1px solid var(--linea); border-radius:var(--r); padding:1.5rem; display:grid; gap:1.1rem }
.persona{ display:grid; gap:.2rem }
.persona b{ font-weight:600 }
.persona a{ color:var(--ocre); text-decoration:none; font-size:.93rem }
.persona a:hover{ text-decoration:underline }

/* ---------- footer ---------- */
.pie{ border-top:1px solid var(--linea); padding-block:3rem 2.5rem; font-size:.85rem; color:var(--hueso-debil) }
.pie__grid{ display:flex; flex-wrap:wrap; gap:1.5rem 3rem; justify-content:space-between; align-items:flex-start }
.pie a{ color:var(--hueso-tenue) }
.pie__aviso{ margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--linea-suave); max-width:80ch; line-height:1.6 }

/* CTA fijo en móvil */
.cta-movil{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(26,23,19,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--linea);
  padding:.7rem var(--gutter);
  padding-bottom:calc(.7rem + env(safe-area-inset-bottom, 0px));
  gap:.6rem;
}
.cta-movil .btn{ flex:1 }

/* ---------- reveal (visible por defecto) ---------- */
.reveal{ opacity:1; transform:none }
@media (prefers-reduced-motion: no-preference){
  .js .reveal{ opacity:0; transform:translateY(18px) }
  .js .reveal.dentro{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1) }
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .nav__links{
    position:fixed; inset:66px 0 auto 0; flex-direction:column; gap:0;
    background:var(--corteza); border-bottom:1px solid var(--linea);
    padding:.5rem var(--gutter) 1.25rem; transform:translateY(-120%); visibility:hidden;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s linear .3s;
    box-shadow:0 20px 40px -24px rgba(0,0,0,.8);
  }
  .nav__links.abierto{
    transform:translateY(0); visibility:visible;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), visibility 0s;
  }
  html.no-js .nav__links{
    position:static; visibility:visible; transform:none; flex-direction:row; flex-wrap:wrap;
    gap:.35rem 1.2rem; background:none; border:0; padding:0; box-shadow:none;
  }
  html.no-js .nav__links li{ border-bottom:0 }
  html.no-js .nav__links a{ display:inline; padding-block:.35rem; font-size:.875rem; white-space:nowrap }
  html.no-js .hamb{ display:none }
  .nav__links li{ border-bottom:1px solid var(--linea-suave) }
  .nav__links a{ display:block; padding-block:.95rem; font-size:1rem; border-bottom:0 }
  .nav .btn--ocre{ display:none }
  .hamb{ display:inline-flex }
  .intro__grid,.ficha__grid,.cont__grid,.barrio__cols{ grid-template-columns:1fr }
  .espacio,.espacio--inv{ grid-template-columns:1fr }
  .espacio__foto,.espacio__txt,.espacio--inv .espacio__foto,.espacio--inv .espacio__txt{ grid-column:1 / -1; order:initial }
  .espacio__txt{ margin-top:-.5rem }
}
@media (max-width: 760px){
  body{ font-size:16px }
  .rail__in{ grid-template-columns:1fr 1fr }
  .rail__c{ padding:1.15rem 0 }
  .rail__c:nth-child(2){ border-right:0 }
  .rail__c:nth-child(-n+2){ border-bottom:1px solid var(--linea) }
  .form__2{ grid-template-columns:1fr }
  .cta-movil{ display:flex }
  body{ padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px)) }
  .gal__grid{ grid-template-columns:repeat(auto-fill, minmax(140px,1fr)) }
  .lb__p{ left:.4rem } .lb__n{ right:.4rem }
}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}

/* impresión */
@media print{
  .nav,.cta-movil,.lb,.calc,.form{ display:none !important }
  body{ background:#fff; color:#000 }
  .hero{ min-height:auto }
}

/* Fotos con proporción propia dentro de columnas estrechas */
.intro__grid figure img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover }
.intro__grid > div > img{ width:100%; height:auto; aspect-ratio:3/4; object-fit:cover }