:root {
  --hero-pattern: none;
  --hero-pattern-opacity: 0;
}
section.hero {
  position: relative;
  isolation: isolate;
}
section.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--hero-pattern, none);
  background-repeat: repeat;
  background-position: center;
  background-size: 280px auto;
  opacity: var(--hero-pattern-opacity, 0);
}
section.hero > .hero-copy,
section.hero > .hero-visual {
  position: relative;
  z-index: 1;
}
.hero-pattern-preview {
  min-height: 120px;
  border-radius: 12px;
  background-color: #081426;
  color: #f4e7c5;
}