.carousel {
  margin: 0 auto;
  padding: 0px;
  max-width: 700px;
  overflow: hidden;
  display: flex;
  > * {
    flex: 0 0 100%;
  }
  &:hover .group {
    animation-play-state: paused;
  }
}

.group {
  display: flex;
  gap: 20px;
  padding-right: 20px;

  will-change: transform;
  animation: scrolling 30s linear infinite;
}

@keyframes scrolling {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

.card {
  width: 100%;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  min-height: 30px;

  &:nth-child(1) {
    background: #fff;
  }
  &:nth-child(2) {
    background: #fff;
  }
  &:nth-child(3) {
    background: #fff;
  }
}