img {
  max-width: 100%;
}
.caption {
  position: absolute;
  top: 50%;
  left: 1rem;
  z-index: 9;
  opacity: 0;
  padding-left: 5rem;
  transition: 500ms ease opacity, 500ms ease transform;
  transform: scale(0.5) translateY(60px); /* Combine transforms */
  &.current-caption {
    transition-delay: 1000ms;
    opacity: 1;
    transform: translateY(0);
  }
  &.previous-caption {
    transform: translateY(-60px);
  }

  a.btn {
    color: #333;
    text-decoration: none;
    background-color: white;
    padding: 0.5rem 1rem;
    position: relative;
    z-index: 9;
    transition: 250ms ease-in background-color, 500ms ease-in color;
    &:hover {
      background-color: black;
      color: white;
    }
  }
}
.container {
  height: 40vh;
  width: 100%;
  background-color: #000;
  max-width: 100%;
}
.left-col,
.right-col {
  width: 100%;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
.left-col {
  background-size: cover;
  overflow: hidden;
  position: relative;

  .slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: left top !important;
    background-size: cover !important;
    background-repeat: no-repeat;
    opacity: 0;
    transition: 1000ms cubic-bezier(1, 0.04, 0.355, 1) transform,
      1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55) clip-path;
    transform: translateY(-100%);
    scale: 1;
    z-index: -1;

    &.previous {
      z-index: 1;
      opacity: 1;
      transform: translateY(0);
      animation-delay: 1s;
      clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
      transition: 3s ease transform;
      will-change: transform;

      &.change {
        transform: translateY(50%);
      }
    }
    &.next {
      transform: translateY(-100%);
      z-index: 3;
      opacity: 1;
      clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
    }
    &.current {
      opacity: 1;
      transform: translateY(0) scale(1.25);
      z-index: 2;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    }
  }
}
.right-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
.right-col .preview {
  max-width: 400px;
}

.nav {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  overflow: hidden;
  a {
    color: rgba(250, 250, 250, 1);
    font-size: 6.5rem;
    text-shadow: 3px 3px black;
  }
  &:hover {
    .slide-up,
    .slide-down {
      opacity: 0.5;
      transform: translateX(0);
    }
  }
  .slide-up,
  .slide-down {
    display: block;
    position: absolute;
    padding: 2rem;
    opacity: 80;
    transition: 0.25s ease opacity, 0.25s ease transform;
    z-index: 99;
    &:hover {
      opacity: 1;
    }
    a {
      text-decoration: none;
    }
  }
  .slide-up {
    top: 50%;
    left: 0;
  }
  .slide-down {
    top: 0;
    right: 0;
  }
}