.hero {
  margin-bottom: 5rem;
}

.hero .hero-bg {
  position: relative;
  height: 60vw;
  min-height: 13.75rem;
  max-height: 22.5rem;
}

.hero .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

@media screen and (min-width: 768px) {
  .hero {
    min-height: 32.5rem;
  }
  .hero .hero-bg {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}
.hero .hero-content-row {
  text-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.5);
}

.hero .hero-badge {
  max-width: 12.5rem;
  filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.4));
}

.hero h1 {
  font-size: 2.25rem;
  text-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 768px) {
  .hero h1 {
    font-size: 3.5rem;
  }
}

/*# sourceMappingURL=style.css.map*/