/*****************************
  *  MARQUEE
  ******************************/
.marquee {
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
}

.marquee-group {
  display: flex;
  padding-right: 20px;
  gap: var(--f-gap-lg);
}

.marquee-item {
  width: 120px;
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.marquee-item img {
  max-width: 100%;
  height: 100%;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-1 * var(--group-width) + 0.5px));
  }
}

/*****************************
  *  MEDIA QUERIES
  ******************************/
@media (min-width: 768px) {
  .marquee-item {
    width: 140px;
  }
}

@media (min-width: 1200px) {
  .marquee-item {
    width: 160px;
  }
}