:root {
  --width: 100%;
}

.slides {
  overflow: hidden;
  position: relative;
  width: var(--width);
  position: relative;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  border-radius: 20px;
}

.slides > * {
  background-size: 100%;
  height: 100%;
  left: var(--width);
  position: absolute;
  top: 0;
  transition: left .5s ease;
  width: 100%;
  z-index: 1;

  &.slide-in {
    left: 0;
    z-index: 3;
  }

  &.slide-out {
    left: -var(--width);
    z-index: 2;
  }
}

.slides img{
  width: 100%;
  height: 100%;
}

@keyframes slide-left {
  from {
    margin-left: 100%;
  }
  to {
    margin-left: 0%;
  }
}