/* Hero V2: stronger media dominance, preserved reading width, controlled breakpoints */
@container pg (min-width:861px) and (max-width:1099px){
  .hero-g{
    grid-template-columns:minmax(0,.90fr) minmax(0,1.10fr);
    gap:28px;
  }
  .hero-t{min-width:0}
  .hero .display{
    font-size:clamp(36px,4.65cqi,50px);
  }
  .hero-media{
    height:clamp(340px,37cqi,400px);
  }
  .hero-media img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    object-position:center center;
  }
}
@container pg (min-width:1100px){
  .hero > .wrap{
    max-width:1380px;
    padding-inline:clamp(32px,3.2cqi,46px);
  }
  .hero-g{
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    gap:clamp(38px,3.5cqi,52px);
    align-items:center;
  }
  .hero-t{
    min-width:0;
    max-width:540px;
  }
  .hero-media{
    height:clamp(420px,35cqi,500px);
    min-width:0;
  }
  .hero-media img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    object-position:center center;
  }
}
@container pg (max-width:860px){
  .hero-media{
    height:auto;
    aspect-ratio:16/10;
  }
  .hero-media img{
    width:100%;
    height:100%;
    max-height:none;
    object-fit:cover;
    object-position:center center;
  }
}