/* Library hero: keep the full artwork visible without sacrificing text space. */
.library-page .hero-grid{min-width:0}
.library-page .hero-copy{min-width:0}
.library-page .hero-art{
  background:#eef4f7;
  min-width:0;
  max-width:100%;
}
.library-page .hero-art img{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  min-width:0;
  object-fit:contain;
  object-position:center center;
  transform:none;
}

/* Desktop / high-resolution screens: the artwork must never use its intrinsic
   image width as a grid minimum. Keep a real minimum width for the copy column
   and let only the artwork column shrink/grow. */
@media (min-width:1280px){
  .library-page .hero-grid{
    width:min(1440px,100%);
    max-width:1440px;
    grid-template-columns:minmax(520px,.88fr) minmax(0,1.12fr);
    min-height:570px;
    aspect-ratio:auto;
    align-items:stretch;
    overflow:hidden;
  }
  .library-page .hero-copy{
    height:auto;
    padding-top:clamp(42px,4vw,70px);
    padding-bottom:clamp(42px,4vw,64px);
    padding-right:clamp(30px,4vw,64px);
    justify-content:center;
  }
  .library-page .hero-copy h1{
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }
  .library-page .hero-art{
    width:100%;
    height:auto;
    min-height:570px;
    aspect-ratio:auto;
    align-self:stretch;
    overflow:hidden;
  }
}

/* Medium desktop sizes keep enough width for the copy and the full 16:9 artwork. */
@media (min-width:981px) and (max-width:1279px){
  .library-page .hero-grid{
    grid-template-columns:minmax(390px,.9fr) minmax(0,1.1fr);
    overflow:hidden;
  }
  .library-page .hero-copy{padding-right:clamp(28px,4vw,52px)}
  .library-page .hero-art{align-self:center;aspect-ratio:16 / 9;min-height:0}
}

/* Tablet and mobile stack the hero and retain the complete illustration. */
@media (max-width:980px){
  .library-page .hero-art{width:100%;height:auto;min-height:0;aspect-ratio:16 / 9}
}