@layer base{:root{--image-mask-gradient-opacity-dir:to bottom;--image-mask-gradient-opacity-stop:50%;--image-mask-gradient-dir:to bottom;--image-mask-gradient-stop:80%;--image-mask-color:var(--color-global-background);--image-mask-alpha-percent:85%}}@utility image-mask-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent))}}@utility image-mask-gradient-washout{@apply relative before:z-1 before:absolute before:inset-0;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-washout-lite{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-alpha-percent:10%;--image-mask-gradient-stop:30%;&:before{background:linear-gradient(var(--image-mask-gradient-dir),--alpha(var(--image-mask-color)/var(--image-mask-alpha-percent)) var(--image-mask-gradient-stop),var(--image-mask-color))}}@utility image-mask-gradient-opacity{-webkit-mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent);mask-image:linear-gradient(var(--image-mask-gradient-opacity-dir),#000 var(--image-mask-gradient-opacity-stop),transparent)}@utility image-mask-hero{@apply relative before:z-1 before:absolute before:inset-0;--image-mask-color:#fff;@variant dark{--image-mask-color:#000}&:before{background:--alpha(var(--image-mask-color)/80%);@variant sm{background:linear-gradient(to right,--alpha(var(--image-mask-color)/90%) 45%,--alpha(var(--image-mask-color)/15%))}}}