/* Shared storefront finish: independent of each carousel image's proportions. */
.section .product > .product-image { position: relative; isolation: isolate; overflow: hidden; }
.section .product > .product-image::after {
  content: "";
  position: absolute;
  inset: 0 -1px 0 auto;
  width: clamp(72px, 17%, 112px);
  height: 100%;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(14,21,23,0) 0%, rgba(14,21,23,.12) 20%, rgba(14,21,23,.55) 55%, rgba(14,21,23,.92) 85%, #0e1517 100%);
  border: 0;
}
/* Rent's full-width screenshots have a different ratio from the card. Fade
   the complete image surface (photo AND ambient fill), so their inner edge
   cannot leave a visible blue/black strip beside the text. Paid is unchanged. */
#gratuitos .product > .product-image {
  background: #0e1517;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,.72) calc(100% - 96px), rgba(0,0,0,.22) calc(100% - 48px), transparent calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - 140px), rgba(0,0,0,.72) calc(100% - 96px), rgba(0,0,0,.22) calc(100% - 48px), transparent calc(100% - 14px), transparent 100%);
}
#gratuitos .product > .product-image::after { display: none; }
@media (max-width: 760px) {
  .section .product > .product-image::after {
    inset: auto 0 -1px;
    width: 100%;
    height: 52px;
    background: linear-gradient(180deg, rgba(14,21,23,0), rgba(14,21,23,.35) 45%, #0e1517 100%);
  }
  #gratuitos .product > .product-image {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 64px), rgba(0,0,0,.5) calc(100% - 30px), transparent calc(100% - 2px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 64px), rgba(0,0,0,.5) calc(100% - 30px), transparent calc(100% - 2px), transparent 100%);
  }
}