/* PORTAL WEB AC LOCAL v0.5.1
   Correcció del carrusel premium: sense veladures blanques, fade només amb mask-image. */

.media-viewport::before,
.media-viewport::after {
  content: none !important;
  display: none !important;
}

.media-viewport {
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 2%,
    rgba(0, 0, 0, 0.56) 4.5%,
    rgba(0, 0, 0, 0.88) 6.5%,
    #000 8%,
    #000 92%,
    rgba(0, 0, 0, 0.88) 93.5%,
    rgba(0, 0, 0, 0.56) 95.5%,
    rgba(0, 0, 0, 0.18) 98%,
    transparent 100%
  ) !important;
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.18) 2%,
    rgba(0, 0, 0, 0.56) 4.5%,
    rgba(0, 0, 0, 0.88) 6.5%,
    #000 8%,
    #000 92%,
    rgba(0, 0, 0, 0.88) 93.5%,
    rgba(0, 0, 0, 0.56) 95.5%,
    rgba(0, 0, 0, 0.18) 98%,
    transparent 100%
  ) !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
}

@media (max-width: 900px) {
  .media-viewport {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 3%,
      rgba(0, 0, 0, 0.64) 6%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.64) 94%,
      rgba(0, 0, 0, 0.22) 97%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.22) 3%,
      rgba(0, 0, 0, 0.64) 6%,
      #000 9%,
      #000 91%,
      rgba(0, 0, 0, 0.64) 94%,
      rgba(0, 0, 0, 0.22) 97%,
      transparent 100%
    ) !important;
  }
}