@media (min-width: 1101px) {
  .hero-copy {
    position: relative;
    z-index: 3;
  }

  .hero-art::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 -20px 0 -125px;
    pointer-events: none;
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .94) 5%, transparent 21%),
      linear-gradient(180deg, #fff 0%, transparent 11%, transparent 87%, #fff 100%);
  }

  .hero-art img {
    -webkit-mask-image: radial-gradient(ellipse 86% 90% at 58% 50%, #000 62%, rgba(0, 0, 0, .94) 74%, transparent 100%);
    mask-image: radial-gradient(ellipse 86% 90% at 58% 50%, #000 62%, rgba(0, 0, 0, .94) 74%, transparent 100%);
  }
}

@media (min-width: 761px) {
  .shop-hero {
    background: linear-gradient(90deg, #fff 0%, #fff 37%, #fffdf7 64%, #fffdf7 100%);
  }

  .shop-hero-inner::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    right: -10px;
    bottom: 0;
    width: 67%;
    pointer-events: none;
    background:
      linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, .92) 5%, transparent 23%),
      linear-gradient(180deg, #fff 0%, transparent 10%, transparent 88%, #fffdf9 100%);
  }

  .shop-hero-inner > img {
    -webkit-mask-image: radial-gradient(ellipse 87% 91% at 60% 50%, #000 62%, rgba(0, 0, 0, .94) 76%, transparent 100%);
    mask-image: radial-gradient(ellipse 87% 91% at 60% 50%, #000 62%, rgba(0, 0, 0, .94) 76%, transparent 100%);
  }
}