body, html {
  margin: 0;
  height: 100%;
  min-height: 100%;
  font-family: "Helvetica Neue", "Arial", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  background: black;
  color: navy;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

.scrollsnap-carousel {
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
  max-width: 100%;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  padding: 100px 0 0 0;
}
.scrollsnap-carousel .slide {
  display: inline-block;
  height: 15%;
  width: 15%;
  flex: 0 0 15%;
  scroll-snap-align: center;
  view-timeline-name: --li-in-and-out-of-view;
  view-timeline-axis: inline;
  animation: linear move-to-top both;
  animation-timeline: --li-in-and-out-of-view;
  perspective: 40em;
  position: relative;
  color: navy;
  transform-origin: bottom;
}
.scrollsnap-carousel .slide:first-of-type {
  margin-left: 50%;
}
.scrollsnap-carousel .slide:last-of-type {
  margin-right: 50%;
}
.scrollsnap-carousel .slide .content {
  border-radius: 10px;
  width: 100%;
  padding-bottom: 100%;
  background: lightblue;
  animation: linear rotateSlide both;
  animation-timeline: --li-in-and-out-of-view;
  position: relative;
}
.scrollsnap-carousel .slide .content .content-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: linear fadeContent both;
  animation-timeline: --li-in-and-out-of-view;
}
.scrollsnap-carousel .slide .content .content-wrapper:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  position: absolute;
  background: linear-gradient(#112d37, black);
  top: 100%;
  left: 0;
  border-radius: 10px 10px 0 0;
}

@keyframes rotateSlide {
  0% {
    transform: translateX(-150%) rotateY(-45deg) translateZ(4em) scale(0.5);
    background: black;
  }
  50% {
    transform: rotateY(0deg) translateZ(1em) scale(1.25);
    background: lightblue;
  }
  100% {
    transform: translateX(150%) rotateY(45deg) translateZ(4em) scale(0.65);
    background: black;
  }
}
@keyframes fadeContent {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes move-to-top {
  0% {
    z-index: 1;
  }
  50% {
    z-index: 100;
  }
  100% {
    z-index: 1;
  }
}