.halftone-container{position:absolute;width:100%;height:100%;z-index:0;top:0;left:0;right:0;bottom:0}.halftone{--dotRadius:2px;--size:12px;--bg:radial-gradient(circle at center,currentColor,currentColor var(--dotRadius),transparent var(--dotRadius));--bgSize:var(--size);position:relative;height:100%;width:100%}.halftone--low{--halftone-intensity:20%}.halftone--medium{--halftone-intensity:40%}.halftone--high{--halftone-intensity:60%}.halftone.top-left{--mask:radial-gradient(at top 10% left 5%,black,transparent var(--halftone-intensity))}.halftone.top-right{--mask:radial-gradient(at top 10% right 5%,black,transparent var(--halftone-intensity))}.halftone.bottom-left{--mask:radial-gradient(at bottom 10% left 5%,black,transparent var(--halftone-intensity))}.halftone.bottom-right{--mask:radial-gradient(at bottom 10% right 5%,black,transparent var(--halftone-intensity))}.halftone:before{content:"";position:absolute;inset:0;background-image:var(--bg);background-size:var(--bgSize,.75rem) var(--bgSize,.75rem);background-repeat:round;background-position:0 0,var(--bgPosition) var(--bgPosition);-webkit-mask-image:var(--mask);mask-image:var(--mask);-webkit-mask-size:cover;mask-size:cover;-webkit-mask-position:center;mask-position:center;transition:background-size .1s}