.hero-packaging {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: min(430px, 82%);
  margin: 0;
  transform: translate(-50%, -48%) rotate(2deg);
}
.hero-packaging::before {
  content: "";
  position: absolute;
  inset: -16px;
  border: 1px solid rgba(48, 48, 106, .24);
  border-radius: 50% 50% 46% 54%;
  transform: rotate(-7deg);
}
.hero-packaging img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 50% 50% 47% 53%;
  filter: saturate(.9) contrast(.96);
  box-shadow: 20px 28px 45px rgba(48, 48, 106, .18);
}
.hero h1 {
  font-size: clamp(50px, 5.5vw, 84px);
}
@media (min-width:801px) {
  .hero {
    grid-template-columns: 1.2fr .8fr;
  }
}
@media (max-width:800px) {
  .hero h1 { font-size: 46px; }
  .hero-packaging { width: min(340px, 82%); }
}