.hero {
  position: relative;
  overflow: hidden;
}

.hero > div {
  position: relative;
  z-index: 2;
  max-width: 62%;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 7%;
  top: 50%;
  width: min(290px, 28vw);
  height: min(200px, 20vw);
  transform: translateY(-50%);
  background: url('/public/logo-armazem.jpg') center / contain no-repeat;
  filter: drop-shadow(0 18px 20px rgba(92, 23, 16, .18));
  opacity: .98;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  right: 5%;
  top: 50%;
  width: min(360px, 35vw);
  height: min(260px, 26vw);
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, .42), transparent 68%);
}

@media (max-width: 700px) {
  .hero {
    min-height: 470px;
    align-items: flex-start;
  }

  .hero > div {
    max-width: 100%;
  }

  .hero::before {
    right: 50%;
    top: auto;
    bottom: 22px;
    width: 220px;
    height: 145px;
    transform: translateX(50%);
  }

  .hero::after {
    right: 50%;
    top: auto;
    bottom: 10px;
    width: 280px;
    height: 180px;
    transform: translateX(50%);
  }
}