/* Default: make carousel images responsive */
#hero-carousel img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* On mobile: make carousel square */
@media (max-width: 768px) {
  #hero-carousel {
    height: 100vw; /* make the carousel height equal to screen width (square) */
    overflow: hidden;
  }

  #hero-carousel img {
    height: 100%;
    width: 100%;
    object-fit: cover; /* ensures no stretching, keeps image covered */
  }

  #hero-carousel .carousel-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 90%;
  }