.card-carousel {
  --carousel-gap: 22px;
  --carousel-card-width: calc((100% - 44px) / 3);
  --carousel-columns: 3;
  --carousel-border: #d9d4e3;
  --carousel-control: #62517d;
  --carousel-hover: #eee8fa;
  min-width: 0;
}
.section-dark .card-carousel {
  --carousel-border: #ffffff26;
  --carousel-control: #c9b8f5;
  --carousel-hover: #ffffff0f;
}
.carousel-viewport { overflow-x: auto; padding: 6px 0 24px; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--carousel-control) transparent; border-radius: 4px; }
.card-carousel.is-ready .carousel-viewport { overflow: hidden; scroll-snap-type: none; touch-action: pan-y; }
.carousel-track { display: flex; align-items: stretch; gap: var(--carousel-gap); }
.carousel-track > * { flex: 0 0 var(--carousel-card-width); scroll-snap-align: start; }
.carousel-track.is-moving { transition: transform 650ms cubic-bezier(.22, .68, .2, 1); will-change: transform; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 3px; color: var(--carousel-control); }
.carousel-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex-shrink: 0; color: inherit; background: transparent; border: 1px solid var(--carousel-border); transition: background .2s, border-color .2s; }
.carousel-controls button:hover { background: var(--carousel-hover); border-color: var(--carousel-control); }
.carousel-arrow { width: 44px; height: 44px; border-radius: 50%; font-size: 22px; line-height: 1; }
.oem-track .logo-image { height: 164px; padding: 30px; }
.oem-track .logo-image img { width: 200px; max-width: 70%; height: 90px; }
.oem-track .logo-card figcaption { font-size: 11px; padding-bottom: 21px; }
@media (max-width: 1100px) {
  .card-carousel { --carousel-card-width: calc((100% - 22px) / 2); --carousel-columns: 2; }
}
@media (max-width: 600px) {
  .card-carousel { --carousel-card-width: 100%; --carousel-columns: 1; }
}