@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

body {
  margin: 0;
}

.slides {
  $slide-bgs: url("https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg"),
    url("https://i.loli.net/2019/10/18/uXF1Kx7lzELB6wf.jpg"),
    url("https://i.loli.net/2019/11/16/FLnzi5Kq4tkRZSm.jpg"),
    url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg"),
    url("https://i.loli.net/2019/11/16/cqyJiYlRwnTeHmj.jpg");

  display: flex;
  width: 100%;
  height: 100vh;

  .slide {
    position: relative;
    flex: 1;
    cursor: pointer;
    filter: grayscale(1);
    transition: 0.5s ease-in-out;

    @for $i from 1 through length($slide-bgs) {
      &:nth-child(#{$i}) {
        background: nth($slide-bgs, $i) center / cover;

        &:hover {
          flex-grow: length($slide-bgs);
          filter: grayscale(0);

          .content {
            opacity: 1;
            transform: scaleX(1);
            transition: 0.5s 0.4s;
          }
        }
      }
    }

    .content {
      position: absolute;
      bottom: 0;
      margin: 2.5em;
      padding: 2em;
      font-family: Lora, serif;
      text-shadow: 0 2px 2px black;
      color: white;
      box-shadow: 0 0.3px 0.7px rgba(0, 0, 0, 0.126),
        0 0.9px 1.7px rgba(0, 0, 0, 0.179), 0 1.8px 3.5px rgba(0, 0, 0, 0.224),
        0 3.7px 7.3px rgba(0, 0, 0, 0.277), 0 10px 20px rgba(0, 0, 0, 0.4);
      backdrop-filter: blur(2px);
      opacity: 0;
      transform: scaleX(0);
      transition: 0.5s;
    }
  }
}
