/* Explicit heights prevent large source dimensions from stretching rendered media. */
.hero-grid{min-height:0}
.hero-media{height:500px;max-height:500px;overflow:hidden}
.hero-media img{width:100%;height:100%;max-height:500px;object-fit:cover;object-position:center}
.card img{width:100%;height:220px;aspect-ratio:auto;object-fit:cover;object-position:center}
.article figure img{width:100%;height:350px;max-height:350px;object-fit:cover;object-position:center}
.method>img{width:100%;height:350px;max-height:350px;object-fit:cover;object-position:center}
@media(max-width:850px){
  .hero-media,.hero-media img{height:280px;max-height:280px}
  .article figure img,.method>img{height:270px;max-height:270px}
}
@media(max-width:560px){
  .hero-media,.hero-media img{height:205px;max-height:205px}
  .card img{height:175px}
  .article figure img,.method>img{height:205px;max-height:205px}
}