.flat-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.flat-marquee-content {
  display: grid;
  grid-auto-flow: column;
  gap: 10px; /* Adjust the gap between items */
  animation: marquee-animation linear infinite;
}

@keyframes marquee-animation-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes marquee-animation-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes marquee-animation-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(-100%);
  }
}

@keyframes marquee-animation-down {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(100%);
  }
}