:root {
  --marquee-speed: 8s;
  --marquee-logo-filter: grayscale(100%) brightness(0.9) contrast(1.2);
  --marquee-logo-blend: multiply;
}

.marquee {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.marquee_inner {
  width: max-content; /* Changed from fit-content to allow it to stretch past 100% width smoothly */
  display: flex;
  position: relative;
  /* Start at 0 instead of 200% */
  transform: translate3d(0, 0, 0);
  animation: marquee var(--marquee-speed) linear infinite;
}

.marquee .marquee_item {
  padding: 1rem 2rem;
  flex-shrink: 0; /* Prevents logos from squishing on small screens */
}

.marquee_logo {
  filter: var(--marquee-logo-filter);
  mix-blend-mode: var(--marquee-logo-blend);
}

.marquee:hover .marquee_inner {
  animation-play-state: paused;
}

/* Seamless Loop Animation Math */
@keyframes marquee {
  0% {
	transform: translate3d(0, 0, 0);
  }
  100% {
	/* Moves left by exactly half the width of the duplicated track */
	transform: translate3d(-50%, 0, 0);
  }
}