/* Reset */
* {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

/* ------------------ Order Hero Banner ------------------ */
.order-hero-banner-container {
  width: 100%;
  aspect-ratio: 16 / 9; /* Keeps ratio clean on desktops */
  max-height: 80vh;
  overflow: hidden;
  position: relative;
}

.order-hero-banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crop nicely */
  display: block;
}

/* Tablet */
@media (max-width: 768px) {
  .order-hero-banner-container {
    aspect-ratio: auto;
    height: 42vh;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .order-hero-banner-container {
    height: 40vh;
  }
}

/* Very small screens */
@media (max-width: 410px) {
  .order-hero-banner-container {
    height: auto;
    max-height: 240px;
  }

  .order-hero-banner-img {
    width: 100%;
    height: auto;
    object-fit: contain; /* Full image without cropping */
  }
}