.carousel {
  margin: 3em auto;
  display: flex;
  gap: 1em;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.carousel::-webkit-scrollbar {
  display: none;
}

.card {
  flex: 0 0 20em;
  padding: 1em;
  height: 12em;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  scroll-snap-align: center;
  background-repeat: repeat;
}

.group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
  animation: spin 20s infinite linear;
}

.card img {
  max-width: 500px;
}

@keyframes spin {
  from {
    translate: 0;
  }
  to {
    translate: -100%;
  }
}