 <style>
    /* LEFT IMAGE: fixed frame ratio + no distortion */
    .hero-media-frame{
      width: 100%;
      aspect-ratio: 6 / 4; /* matches your old aspect-w-6 aspect-h-4 */
    }
    @media (min-width: 768px){
      .hero-media-frame{
        aspect-ratio: 6 / 5; /* matches md-aspect-w-6 md-aspect-h-5 */
      }
    }
    .hero-media-img{
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;       /* prevents stretching */
      object-position: center; /* adjust to 'top' if needed */
    }
  </style>
</section>