.grid-pattern{position:relative}.grid-pattern:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-light)) var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-light)) var(--grid-size)),repeating-linear-gradient(90deg,transparent,transparent var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-light)) var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-light)) var(--grid-size));pointer-events:none;z-index:1}.grid-pattern-subtle{position:relative}.grid-pattern-subtle:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-subtle)) var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-subtle)) var(--grid-size)),repeating-linear-gradient(90deg,transparent,transparent var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-subtle)) var(--grid-line-width),rgba(0,0,0,var(--grid-opacity-subtle)) var(--grid-size));pointer-events:none;z-index:1}.grid-pattern-light{position:relative}.grid-pattern-light:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-light)) var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-light)) var(--grid-size)),repeating-linear-gradient(90deg,transparent,transparent var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-light)) var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-light)) var(--grid-size));pointer-events:none;z-index:1}.grid-pattern-dark{position:relative}.grid-pattern-dark:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-image:repeating-linear-gradient(0deg,transparent,transparent var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-dark)) var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-dark)) var(--grid-size)),repeating-linear-gradient(90deg,transparent,transparent var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-dark)) var(--grid-line-width),rgba(255,255,255,var(--grid-opacity-dark)) var(--grid-size));pointer-events:none;z-index:1}.grid-pattern>*{position:relative;z-index:2}