.dots-base{position:relative;overflow:hidden}.dots-base{--dot-color:var(--primary-light-trans-20);--dot-gap:36px;--dot-radius:3px;--dot-z:-1;--dot-pattern-span:40%;--dot-fade:50%;--dot-angle:90deg}.dots-base::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:var(--dot-z);mask-image:linear-gradient(var(--dot-angle),#000 0,#000 var(--dot-pattern-span),transparent var(--dot-pattern-span)),linear-gradient(var(--dot-angle),#000 var(--dot-fade),transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(var(--dot-angle),#000 0,#000 var(--dot-pattern-span),transparent var(--dot-pattern-span)),linear-gradient(var(--dot-angle),#000 var(--dot-fade),transparent);-webkit-mask-composite:source-in}.dots-grid::before{background:radial-gradient(circle,var(--dot-color) var(--dot-radius),transparent calc(var(--dot-radius) + 0.1px)) 0 0 / var(--dot-gap) var(--dot-gap)}.dots-staggered::before{background:radial-gradient(circle,var(--dot-color) var(--dot-radius),transparent calc(var(--dot-radius) + 0.1px)) 0 0 / var(--dot-gap) var(--dot-gap),radial-gradient(circle,var(--dot-color) var(--dot-radius),transparent calc(var(--dot-radius) + 0.1px)) calc(var(--dot-gap)/2) calc(var(--dot-gap)/2) / var(--dot-gap) var(--dot-gap)}