/* Preserve source-photo proportions for the homepage mosaic sprite.
   The mosaic is four horizontal panels. 400% width keeps each panel aligned
   to one card; auto height prevents the image from being stretched vertically. */

/* Default safeguard: responsive images keep their intrinsic proportions.
   Components that intentionally crop artwork (for example .story-media) retain
   their more-specific aspect-ratio and object-fit rules. */
img{
  max-width:100%;
  height:auto;
}

.feature-card{
  background-size:400% auto!important;
  background-repeat:no-repeat;
  background-color:#111;
}
.feature-card.classroom{background-position:0 center}
.feature-card.avengers{background-position:33.333% center}
.feature-card.arendelle{background-position:66.666% center}
.drj-photo{
  background-size:auto 100%,400% auto!important;
  background-position:center,100% center;
  background-repeat:no-repeat;
  background-color:#111;
}

/* Book artwork should scale inside its container without distortion. */
.real-book-cover,
.book-cover-panel img,
.book-wrap img,
.chronicle-band-art img,
.chronicle-cover img{
  height:auto;
  object-fit:contain;
}