/* Mila Stays v129 — article hero safety adjustment.
   Scope: first image beside each article title only.
   Goal: slightly smaller first image and guaranteed separation between text and image.
   No article wording is changed. */

/* Keep title and first image in distinct grid tracks. */
.article-page .article-hero-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1.22fr) minmax(300px,.78fr)!important;
  column-gap:68px!important;
  row-gap:34px!important;
  align-items:center!important;
}
.article-page .article-hero-copy{
  min-width:0!important;
  width:100%!important;
  max-width:100%!important;
  position:relative!important;
  z-index:1!important;
  overflow:visible!important;
}
.article-page .article-hero h1{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  overflow-wrap:break-word!important;
  word-break:normal!important;
  white-space:normal!important;
}
.article-page figure.article-hero-media{
  position:relative!important;
  z-index:0!important;
  justify-self:end!important;
  margin:0!important;
  overflow:hidden!important;
}
.article-page figure.article-hero-media img{
  display:block!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Desktop: make every first article image a little smaller than v128. */
@media (min-width:981px){
  .article-page figure.article-hero-media.article-media-standard{
    width:min(33vw,480px)!important;
    max-width:480px!important;
  }
  .article-page figure.article-hero-media.article-media-standard img{
    width:100%!important;
    max-width:100%!important;
  }
  .article-page figure.article-hero-media.article-media-tall{
    width:min(27vw,370px)!important;
    max-width:370px!important;
  }
  .article-page figure.article-hero-media.article-media-tall img{
    width:100%!important;
    max-width:100%!important;
  }
}

/* Tablet: stack title and image to eliminate any possibility of overlap. */
@media (max-width:980px){
  .article-page .article-hero-grid{
    grid-template-columns:1fr!important;
    row-gap:30px!important;
  }
  .article-page figure.article-hero-media{
    justify-self:center!important;
  }
  .article-page figure.article-hero-media.article-media-standard,
  .article-page figure.article-hero-media.article-media-standard img{
    width:min(80vw,480px)!important;
    max-width:480px!important;
  }
  .article-page figure.article-hero-media.article-media-tall,
  .article-page figure.article-hero-media.article-media-tall img{
    width:min(68vw,360px)!important;
    max-width:360px!important;
  }
}

/* Mobile: title always above image, with a compact first image. */
@media (max-width:620px){
  .article-page .article-hero-grid{row-gap:24px!important;}
  .article-page figure.article-hero-media.article-media-standard,
  .article-page figure.article-hero-media.article-media-standard img{
    width:min(84vw,330px)!important;
    max-width:330px!important;
  }
  .article-page figure.article-hero-media.article-media-tall,
  .article-page figure.article-hero-media.article-media-tall img{
    width:min(78vw,300px)!important;
    max-width:300px!important;
  }
}