/* BG Lab bank carousel: approved compact replacement for the static logo grid. */
.banks-trust-section {
  padding-block: 40px;
  overflow: hidden;
}

.bank-carousel-shell {
  overflow: hidden;
}

.bank-logo-marquee {
  overflow: hidden;
  outline: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}

.bank-logo-marquee:focus-visible {
  border-radius: var(--radius-sm);
  box-shadow: 0 0 0 3px #8dacff;
}

.bank-logo-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: bank-logo-marquee 32s linear infinite;
}

.bank-logo-sequence {
  display: flex;
  flex: none;
  gap: 12px;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
}

.bank-logo-sequence li {
  width: clamp(176px, 15vw, 204px);
  flex: none;
  height: 92px;
  background: var(--white);
  border: 1px solid #ffffff24;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 16px;
}

.bank-logo-sequence img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: 42px;
  height: auto;
  object-fit: contain;
}

.bank-logo-sequence li[data-bank='psb'] img {
  max-height: 50px;
}

.bank-logo-marquee:hover .bank-logo-track,
.bank-logo-marquee:focus .bank-logo-track,
.bank-logo-marquee:focus-within .bank-logo-track {
  animation-play-state: paused;
}

@keyframes bank-logo-marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (width <= 1020px) {
  .banks-trust-section {
    padding-block: 36px;
  }
}

@media (width <= 680px) {
  .banks-trust-section {
    padding-block: 30px;
  }

  .bank-carousel-shell {
    width: 100%;
    padding-inline: 0;
  }

  .bank-logo-sequence {
    gap: 8px;
    padding-right: 8px;
  }

  .bank-logo-sequence li {
    width: 148px;
    height: 74px;
    padding: 14px 12px;
  }

  .bank-logo-sequence img {
    max-height: 31px;
  }

  .bank-logo-sequence li[data-bank='psb'] img {
    max-height: 37px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bank-logo-marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .bank-logo-track {
    display: block;
    width: 100%;
    animation: none !important;
    transform: none;
    will-change: auto;
  }

  .bank-logo-sequence:first-child {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: 12px;
    padding: 0;
  }

  .bank-logo-sequence[aria-hidden='true'] {
    display: none;
  }

  .bank-logo-sequence li {
    width: auto;
  }
}

@media (width <= 680px) and (prefers-reduced-motion: reduce) {
  .bank-logo-sequence:first-child {
    gap: 8px;
  }
}