.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); }