@keyframes s1 {
  0% {
    width: 0;
  }

  to {
    width: var(--tr-width);
  }
}

@keyframes s3 {
  0% {
    width: var(--tr-width);
  }

  to {
    width: 0;
  }
}

:root {
  --parallax-padding--origin: 10px;
  --parallax-padding: var(--parallax-padding--origin, 10px);
  --parallax-radius--origin: 20px;
  --parallax-radius: var(--parallax-radius--origin, 20px);
}

.c-parallax {
  overflow: hidden;
  border-top-left-radius: var(--parallax-radius);
  border-top-right-radius: var(--parallax-radius);
  display: block;
  width: auto;
  position: relative;
  aspect-ratio: 1.479166666666667;
  z-index: 0;
}

.c-parallax__wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

.c-parallax__inner {
  padding: 0 var(--parallax-padding);
}

.c-parallax img {
  margin: 0 calc(var(--parallax-padding)*-1);
  position: absolute;
  display: block;
  width: calc(100% + var(--parallax-padding)*2);
  height: auto;
  top: 0;
  left: 0;
  will-change: transform;
  object-fit: cover;
}

.c-transition__wrapper {
  display: grid;
  grid-template-areas: "a";
  --tr-width-unit: 1vw;
  --tr-width: calc(var(--tr-width-unit) * 100);
  --tr-duration: .66s;
  --tr-ease: cubic-bezier(.65, 0, .35, 1);
}

.c-transition__fig {
  display: flex;
  aspect-ratio: 2.005571030640668;
}

.c-transition__li {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: .694444444444444;
  grid-area: a;
  z-index: 0;
}

.c-transition__li.-prev {
  z-index: 1;
}

.c-transition__pane {
  display: block;
  width: var(--tr-width);
  height: 100%;
}

.c-transition__pic {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.-s0 .c-transition__pic {
  width: 0;
}

.-s1 .c-transition__pic {
  width: 0;
  animation: s1 var(--tr-duration) forwards var(--tr-ease);
}

.-s3 .-animation .c-transition__pic {
  width: var(--tr-width);
  margin: 0 0 0 auto;
  animation: s3 var(--tr-duration) forwards var(--tr-ease);
}

.c-transition__img {
  display: block;
  width: var(--tr-width);
  height: 100%;
  object-fit: cover;
}

.-s1 .c-transition__img {
  position: absolute;
  top: 0;
  left: 0;
}

.-s3 .c-transition__img {
  position: absolute;
  top: 0;
  right: 0;
}

@media only screen and (min-width:768px) {
  :root {
    --parallax-padding--origin: 40px;
  }

  .c-parallax {
    aspect-ratio: 2.518518518518519;
  }

  .c-transition__wrapper {
    --tr-width: calc(var(--tr-width-unit) * (100 / 5));
  }

  .c-transition__li {
    aspect-ratio: 2.005571030640668;
  }

  .c-transition__img.-i0 {
    object-position: 0 50%;
  }

  .c-transition__img.-i1 {
    object-position: 25% 50%;
  }

  .c-transition__img.-i2 {
    object-position: 50% 50%;
  }

  .c-transition__img.-i3 {
    object-position: 75% 50%;
  }

  .c-transition__img.-i4 {
    object-position: 100% 50%;
  }
}