/* Teens page only (loaded by /teens). Everything is prefixed .teens- so other pages are unaffected. Mirrors css/kids.css. */

/* hero: portrait in the existing arch frame (image is 4:5, so nothing is cropped) */
.teens-hero__img{background:var(--walnut)}
.teens-hero__img img{object-position:50% 30%}
@media (max-width:820px){
  .phero__img.teens-hero__img{aspect-ratio:4/5;width:min(100%,360px);margin-inline:auto}
}

/* supporting sections: heading + landscape photo on the left, text on the right */
.sec.teens-support{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}
.teens-support__media>h2{margin:0 0 clamp(20px,2.6vw,30px)}
.teens-support__fig{margin:0}
.teens-support__fig picture{display:block}
.teens-support__fig img{display:block;width:100%;height:auto;border-radius:6px}
@media (max-width:820px){
  .sec.teens-support{grid-template-columns:1fr;gap:20px}
}