.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 45rem;
  height: 100%;
  background-image: url("/assets/honey-eee55bd7.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 0;
  transform: scaleX(-1);
  border-radius: 0;
}

.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 45rem;
  height: 100%;
  background-image: url("/assets/honey-eee55bd7.png");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  z-index: 0;
  border-radius: 0;
}

@media (max-width: 1400px) {
  .hero::after {
    width: 75rem;
    left: -37.5rem;
  }
}

@media (max-width: 1400px) {
  .hero::before {
    width: 75rem;
    right: -37.5rem;
  }
}

@media (max-width: 1200px) {
  .hero::after {
    width: 70rem;
    left: -35rem;
  }
}

@media (max-width: 1200px) {
  .hero::before {
    width: 70rem;
    right: -35rem;
  }
}

@media (max-width: 768px) {
  .hero::after {
    width: 60rem;
    left: -30rem;
  }
}

@media (max-width: 768px) {
  .hero::before {
    width: 60rem;
    right: -30rem;
  }
}

@media (max-width: 576px) {
  .hero::after {
    width: 40rem;
    left: -30rem;
    opacity: 0.4;
  }
}

@media (max-width: 576px) {
  .hero::before {
    width: 40rem;
    right: -30rem;
    opacity: 0.4;
  }
}