.carousel-x2 {
  
  transition: all 0.4s ease;
  overflow-x: auto;
  user-select: none;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scroll-behavior: smooth;
  scrollbar-width: 0;

  /* mozilla firefox has no -webkit-scollbar thing, and webkit scrollbar pseudo elements styling isn't supported in mozilla firefox
    so we have to use these to control the scrollbar */
  scrollbar-width: none;
}

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

.carousel-x2.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.carousel-x2:active {
  transform: scale(0.9);
}

.carousel-x2.no-transition {
  scroll-behavior: auto;
}

.carousel-x2 .card-x2 {
  scroll-snap-align: start;
  position: relative;
  /* overflow: hidden; */
  transition: all 0.4s ease;
}

.carousel-x2 > .card-x2:active {
  transform: scale(0.99);
}