html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.hero-text {
}

/* Base - Mobile first (default for all screens) */
.hero-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  z-index: 10;
  width: 100%;
  max-width: 100%;
  height: auto;
  overflow: hidden;
}

.hero-img img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

/* Small phones (up to 430px) */
@media (max-width: 430px) {
  .hero-text {
    text-align: center;
    justify-content: center;
    align-items: center;
    margin: auto;
  }

  .hero-img {
    height: 18rem;
  }

  .hero-img img {
    object-fit: cover;
  }
}

/* Larger phones (431px to 639px) */
@media (min-width: 431px) and (max-width: 639px) {
  .hero-img {
    height: 22rem;
  }
}

/* sm - Small tablets (640px+) */
@media (min-width: 640px) {
  .hero-img {
    height: 25rem;
  }
}

/* md - Tablets (768px+) */
@media (min-width: 768px) {
  .hero-img {
    height: 28rem;
    width: auto;
    max-width: 100%;
  }

  .hero-img img {
    width: auto;
    height: 100%;
  }
}

/* Tablet Pro / Surface (912px+) */
@media (min-width: 912px) {
  .hero-img {
    height: 30rem;
  }
}

/* lg - Small laptops (1024px+) */
@media (min-width: 1024px) {
  .hero-img {
    height: 32rem;
  }
}

/* xl - Laptops (1280px+) */
@media (min-width: 1280px) {
  .hero-img {
    height: 33rem;
  }
}

/* Large screens (1366px+) */
@media (min-width: 1366px) {
  .hero-img {
    height: 35rem;
  }
}