/* A single, responsive brush mark behind the product name. */
.hero h1 {
  position: relative;
  isolation: isolate;
  width: fit-content;
}

.hero h1::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -.06em -.17em -.10em -.16em;
  background: url('/assets/paint-swipe.svg') center / 100% 100% no-repeat;
  transform: rotate(-2deg);
  pointer-events: none;
}

.hero h1 > span {
  color: #8c681a;
}

@media (max-width: 620px) {
  .hero h1 {
    margin-inline: auto;
  }

  .hero h1::before {
    inset-inline: -.10em;
  }
}