.scroll-wrapper {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;

  mask-image: linear-gradient(
    to right,
    transparent,
    black 10px,
    black calc(100% - 10px),
    transparent
  );

  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 10px,
    black calc(100% - 10px),
    transparent
  );
}

.event-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
}

.event-card {
  flex-shrink: 0;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transform: scale(0.88);
  opacity: 0.75;
  transform-origin: center top;
}

.event-carousel::before {
  content: "";
  flex: 0 0 calc(50% - 100px);
}


.event-carousel::after {
  content: "";
  flex: 0 0 calc(50% - 180px);
}

.event-card.is-active {
  transform: scale(1);
  opacity: 1;
}