.crypto-marquee {
  padding: 40px 0;
  background-color: #1b1e22;
}

.crypto-marquee .marquee-row {
  overflow: hidden;
  padding: 6px 0;
  --crypto-marquee-gap: 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.crypto-marquee .marquee-track {
  display: flex;
  width: max-content;
  animation: crypto-mq 42s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.crypto-marquee .marquee-set {
  display: flex;
  align-items: center;
  gap: var(--crypto-marquee-gap);
  padding-right: var(--crypto-marquee-gap);
  flex-shrink: 0;
}

.crypto-marquee .logoAll.crypto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  color: #fff;
}

.crypto-marquee .crypto-logo {
  width: 32px;
  height: 32px;
  display: block;
}

.crypto-marquee .crypto-name {
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.85);
}

@keyframes crypto-mq {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@media screen and (min-width: 768px) {
  .crypto-marquee .marquee-row { --crypto-marquee-gap: 44px; }
}

@media screen and (min-width: 992px) {
  .crypto-marquee .marquee-row { --crypto-marquee-gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .crypto-marquee .marquee-track { animation: none; }
}