.hero-section {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 90vh;
}
.hero-subtitle {
  text-shadow: 2px 2px 2px var(--color-accent-3);
}
@media (max-width: 575.98px) {
  .hero-section {
    background-image: url(/templates/01/images/bg-hero-phone.avif);
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-section {
    background-image: url(/templates/01/images/bg-hero-tablet.avif);
    min-height: 100vh;
  }
}

@media (min-width: 992px) {
  .hero-section {
    background-image: url(/templates/01/images/bg-hero-desktop.avif);
  }
}