div:has( > [data-px="hero-image"]) {
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  align-items: start;
  column-gap: 34px;
  display: grid;
}

div:has( > [data-px="hero-image"]) > * {
  grid-column: 2;
}

div:has( > [data-px="hero-image"]) > :first-child {
  grid-column: 1 / -1;
}

div:has( > [data-px="hero-image"]) > [data-px="hero-image"] {
  border-radius: 22px;
  grid-area: 2 / 1 / 5;
  width: 200px;
  height: 200px;
  margin: 0;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1);
  overflow: hidden;
}

div:has( > [data-px="hero-image"]) > [data-px="hero-image"]:hover {
  transform: scale(1.03) rotate(-1deg);
}

div:has( > [data-px="hero-image"]) > [data-px="hero-image"] img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  padding: 14px;
}

div:has( > [data-px="hero-image"]) h1 {
  letter-spacing: -.035em !important;
  margin-top: 0 !important;
  font-size: max(30px, min(3.8vw, 50px)) !important;
  line-height: 1.04 !important;
}

div:has( > [data-px="hero-image"]) > p {
  margin-top: 14px !important;
}

[data-px="best-box"] {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

[data-px="best-box"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(60, 30, 120, .18);
}

@media (max-width: 640px) {
  div:has( > [data-px="hero-image"]) {
    grid-template-columns: 104px minmax(0, 1fr);
    column-gap: 16px;
  }

  div:has( > [data-px="hero-image"]) > [data-px="hero-image"] {
    border-radius: 16px;
    width: 104px;
    height: 104px;
  }

  div:has( > [data-px="hero-image"]) h1 {
    font-size: 24px !important;
  }

  div:has( > [data-px="hero-image"]) > p {
    grid-column: 1 / -1;
  }
}

.rv {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.2, .8, .2, 1), transform .75s cubic-bezier(.2, .8, .2, 1);
  transition-delay: var(--d, 0s);
  transform: translateY(24px);
}

.rv.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1 !important;
    transition: none !important;
    transform: none !important;
  }

  div:has( > [data-px="hero-image"]) > [data-px="hero-image"] {
    transition: none !important;
  }

  [data-px="best-box"] {
    transition: none !important;
  }
}