@font-face {
   font-family: Manrope;
   src: url("./Manrope-VariableFont-wght.ttf");
}

h1 {
   font-size: 50px;
   font-weight: normal;
   font-family: Manrope;
   text-align: center;
}

.carousel {
  margin: 0 auto;
  padding: 20px 0;
  max-width: 1064px;
  display: flex;
  overflow: hidden;
  &:hover .group {
    animation-play-state: paused;
  }
}

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

.group {
  display: flex;
  gap: 20px;
  padding-right: 20px;
  will-change: transform;
  animation: scrolling 35s linear infinite;
}

.card {
  flex: 0 0 5em;
  height 5em;
}

@keyframes scrolling {
  0%, 
  14% {
    transform: translateX(0);
  }
  20%,
  34% {
    transform: translateX(-20%);
  }
  40%,
  54% {
    transform: translateX(-40%);
  }
  60%,
  74% {
    transform: translateX(-60%);
  }
  80%,
  94% {
    transform: translateX(-80%);
  }
  100% {
    transform: translateX(-100%);
  }
}