/* Keep responsive picture sources inside one layout box. Do not use display:contents on <picture>: its <source> children can become visible layout items. */
picture.modern-image {
  display: block;
  max-width: 100%;
}

/* The Learn card grid uses a consistent 16:7 thumbnail window. Cover each
   window so source images with different proportions never leave blank bars. */
.library:not(.compact-library) .article-card > picture.modern-image > img {
  object-fit: cover !important;
}

/* Content images retain their source proportions instead of inheriting the
   large source-file height attribute after the browser scales their width. */
.article-card > picture.modern-image,
.article-visual > picture.modern-image,
.visual > picture.modern-image,
.portrait > picture.modern-image {
  width: 100%;
}

.article-card > picture.modern-image > img,
.article-visual > picture.modern-image > img,
.visual > picture.modern-image > img,
.portrait > picture.modern-image > img {
  display: block;
  width: 100%;
  height: auto !important;
  object-fit: contain !important;
}

/* The Edward profile headshot has large intrinsic height attributes. Keep it
   inside the designed portrait frame instead of letting those attributes
   stretch the hero column. */
.brand-profile > picture.modern-image {
  width: 100%;
}

.brand-profile > picture.modern-image > img {
  width: 100%;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
}

/* Compact Learn view uses a real image box, with a proportional thumbnail crop. */
.library.compact-library .article-card {
  grid-template-columns: 104px minmax(0, 1fr);
}

.library.compact-library .article-card > picture.modern-image {
  width: 104px;
  height: 72px;
  max-width: none;
  overflow: hidden;
}

.library.compact-library .article-card > picture.modern-image > img {
  width: 100%;
  height: 100% !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}

@media (max-width: 600px) {
  .library.compact-library .article-card {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .library.compact-library .article-card > picture.modern-image {
    width: 76px;
    height: 58px;
  }
}