/* STYLO: BANNER */
.hero-banner {
  max-width: var(--max-navbar-width);
  width: auto;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  box-shadow: 4px 4px 8px var(--shadow);
}

.hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
/* FIN DE STYLO: BANNER */

@media (max-width: 1200px) {
    .hero-banner {
        margin: 0 0.7rem 0 0.7rem;
    }
}

@media (max-width: 500px) {
    .hero-banner {
        display: none;
    }
}