.zylo-payment-loop-viewport {
  display: none;
}

@media (max-width: 760px) {
  .zylo-card-showcase_paymentCardsGrid__oXgrW[data-zylo-payment-loop-source="true"] {
    display: none !important;
  }

  .zylo-payment-loop-viewport {
    display: block;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    overflow: hidden;
    padding: 6px 0 20px;
    contain: layout paint;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  }

  .zylo-payment-loop-track {
    display: flex;
    width: max-content;
    animation: zylo-payment-loop-slide 26s linear infinite;
    animation-play-state: paused;
    transform: translate3d(0, 0, 0);
  }

  .zylo-payment-loop-viewport.is-active .zylo-payment-loop-track {
    animation-play-state: running;
  }

  .zylo-payment-loop-group {
    display: flex;
    flex: none;
    gap: 14px;
    padding-right: 14px;
  }

  .zylo-payment-loop-group .zylo-card-showcase_paymentCardShell__v_4zv {
    flex: 0 0 min(78vw, 300px);
    width: min(78vw, 300px);
  }

  @keyframes zylo-payment-loop-slide {
    to {
      transform: translate3d(-50%, 0, 0);
    }
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .zylo-payment-loop-viewport {
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .zylo-payment-loop-viewport::-webkit-scrollbar {
    display: none;
  }

  .zylo-payment-loop-track {
    animation: none;
  }

  .zylo-payment-loop-group + .zylo-payment-loop-group {
    display: none;
  }

  .zylo-payment-loop-group {
    padding-left: 16px;
  }

  .zylo-payment-loop-group .zylo-card-showcase_paymentCardShell__v_4zv {
    scroll-snap-align: center;
  }
}