.hero-section {
  min-height: 90vh;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(248, 223, 182, 0.3);
  width: 100%;
  height: 100%;
  z-index: -1;
}
.hero-section-wrapper {
  background-color: var(--color-secondary);
  height: auto;
  border-radius: 0.5rem;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  box-shadow:
    rgba(0, 0, 0, 0.4) 0px 2px 4px,
    rgba(0, 0, 0, 0.3) 0px 7px 13px -3px,
    rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

@media (max-width: 575.98px) {
  .hero-section {
    background: url(/templates/06/images/bg-footer-phone.avif) right bottom / cover no-repeat;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .hero-section {
    background: url(/templates/06/images/bg-footer-tablet.avif) right bottom / cover no-repeat;
    min-height: 100vh;
  }
}

@media (min-width: 992px) {
  .hero-section {
    background: url(/templates/06/images/bg-footer-desktop.avif) right bottom / cover no-repeat;
  }
}