/*
Label: Hero Gradient Grid
Category: Background
Description: Gradient background with adjustable grid overlay.

Variables:
--grid-rgb: 255,255,255
--grid-opacity: 0.04
--grid-line: 1px
--grid-size: 40px
*/

.wpeve-hero-grid {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #061A17 0%, #0B3F3A 50%, #0EA5A4 100%);
}

.wpeve-hero-grid::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image:
    linear-gradient(
      rgba(var(--grid-rgb, 255,255,255),
      var(--grid-opacity, 0.04))
      var(--grid-line, 1px),
      transparent var(--grid-line, 1px)
    ),
    linear-gradient(
      90deg,
      rgba(var(--grid-rgb, 255,255,255),
      var(--grid-opacity, 0.04))
      var(--grid-line, 1px),
      transparent var(--grid-line, 1px)
    );

  background-size: var(--grid-size, 40px) var(--grid-size, 40px);

  pointer-events: none;
}