@media (max-width: 1024px) {
  .hero,
  .hero-grid {
    min-height: max(660px, calc(clamp(130px, 33.333vw, 340px) + 420px));
  }
  .hero {
    background: linear-gradient(160deg, #fff 0%, #f4fbfd 100%);
  }
  .hero-grid {
    display: block;
  }
  .hero-carousel {
    inset: auto 0 0;
    height: clamp(130px, 33.333vw, 340px);
    background: linear-gradient(135deg, #eaf5f8 0%, #d7ebf1 100%);
  }
  .hero-slide img {
    object-fit: contain;
    object-position: center;
  }
  .hero-scrim {
    background: linear-gradient(90deg, rgba(9, 58, 120, .07), rgba(255, 255, 255, 0) 48%, rgba(9, 58, 120, .07));
  }
  .hero-copy {
    max-width: min(570px, 100%);
    padding: clamp(52px, 7vw, 72px) 0 0;
  }
  .hero-controls {
    right: max(22px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .hero,
  .hero-grid {
    min-height: 620px;
  }
  .hero-copy {
    padding-top: 52px;
  }
  .hero-copy-slide h2 {
    font-size: clamp(29px, 8.2vw, 32px);
  }
  .hero-controls {
    gap: 7px;
    right: 14px;
  }
  .hero-dots {
    gap: 6px;
  }
}