.sjtl-page-hero {
  aspect-ratio: 3 / 1;
}

/* Card image crops use the same ratios as their responsive Crop entities.
 * A ratio-based frame stays proportionate in two-, three-, and four-column
 * grids, rather than the former fixed 200px height becoming shallow on wider
 * cards. */
.sjtl-card-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

/* Media Row frames follow the exact ratios generated by the responsive
 * content crop styles: 4:3 on desktop/tablet and 1:1 on phones. */
.sjtl-content-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

@media (max-width: 1023px) {
  .sjtl-page-hero {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 767px) {
  .sjtl-page-hero {
    aspect-ratio: 4 / 5;
  }

  .sjtl-card-image {
    aspect-ratio: 1 / 1;
  }

  .sjtl-content-image {
    aspect-ratio: 1 / 1;
  }
}