/* =========================================================
   Slider Fade (Mask) Utility
   Apply to any slider or horizontally scrolling element
   Class: slider-fade--mask
   ========================================================= */

/* ===================================
   PER-ELEMENT OVERRIDES
   (copy into element CSS if needed)
   =================================== 

%root% {
  --fade: 10vw;
}

*/

.slider-fade--mask {
  --fade: 5vw; /* default fade width */
  position: relative;
  overflow-x: hidden;
 
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}