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