react-carousel-query/dist/components/badgeIndex/badgeIndex.module.css

A infinite carousel component made with react that handles the pagination for you.

.badgeIndex {
  background-color: #1f1e1e;
  border-radius: 20px;
  padding: 5px;
  color: #fff;
  opacity: 0;
  font-size: 10px;
  letter-spacing: 1px;
}

@media only screen and (min-width: 768px) {
  .badgeIndex {
    font-size: 14px;
  }
}

@media only screen and (min-width: 1024px) {
  .badgeIndex {
    font-size: 16px;
  }
}

.fadeInFadeOut {
  animation: fadeInFadeOut 10s;
  animation-delay: 2s;
  animation-fill-mode: forwards;
}

@keyframes fadeInFadeOut {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}