* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.c-image {
  position: relative;
  overflow: hidden;
}
.c-image .c-image__image {
  display: block;
  height: 100%;
  opacity: 0;
}
.c-image .c-image__image.-revealed {
  opacity: 1;
}

main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 400vh;
  margin: 0 auto;
  background-color: #191919;
}

.wrapper {
  --card-width: 30vw;
  --card-gap: 200px;
  --card-count: 5;
  --travel: calc(-1 * ((var(--card-width) + var(--card-gap)) * (var(--card-count) - 1)));
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  padding-inline: calc(50vw - var(--card-width) / 2);
  gap: var(--card-gap);
  animation: wheel 1s linear forwards paused;
  animation-delay: calc(var(--progress) * -1s);
}
.wrapper .c-image {
  min-width: var(--card-width);
  max-width: 70vw;
  width: 100%;
  height: auto;
}
.wrapper .c-image .c-image__image {
  width: 100%;
}

@keyframes wheel {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--travel));
  }
}/*# sourceMappingURL=style.css.map */