<style>
  .hero-image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 300px; /* Adjust this value to control how much is shown */
  }

  .hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center; /* Aligns the image to the top, crops only the bottom */
  }
</style>