#app
  .pusher.pt-1 
    .ui.center.aligned.vertical.grid.container
      section#slider.row.four.column
        input(type="radio" name="slider" v-for="(n, index) in 5" :id="'s' + n" :checked="n === 3")
        label(class="column" v-for="(n, index) in 5" :for="'s' + n" :id="'slide' + n")   
          img(src="https://via.placeholder.com/320x400")

body {
  background: #81cda7;
}
.pt-1 {
  padding-top: 5%;
}
#slider {
  position: relative;
  height: 25vw;
  [type=radio] {
    display: none;
  }
  perspective: 1000px;
  transform-style: preserve-3d;
  label {
    margin: auto;
    width: 20%;
    border-radius: 4px;
    position: absolute;
    left: 0; 
    right: 0;
    cursor: pointer;
    transition: transform 0.4s ease;
    img {
      width: 100%;
    }
  }
 
}

#s1:checked ~ #slide4, #s2:checked ~ #slide5,
#s3:checked ~ #slide1, #s4:checked ~ #slide2,
#s5:checked ~ #slide3 {
  img {
    box-shadow: -6px 1px 69px -14px rgba(0,0,0,0.75);
  }
  transform: translate3d(-120%,0,-200px) rotateY(45deg);
}

#s1:checked ~ #slide5, #s2:checked ~ #slide1,
#s3:checked ~ #slide2, #s4:checked ~ #slide3,
#s5:checked ~ #slide4 {
  img {
    box-shadow: -6px 1px 69px -14px rgba(0,0,0,0.75);
  }
  transform: translate3d(-65%,0,-100px) rotateY(45deg);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3, #s4:checked ~ #slide4,
#s5:checked ~ #slide5 {  
  img {
    box-shadow: 0px 1px 94px 0px rgba(0,0,0,0.75);
  }
  transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide4, #s4:checked ~ #slide5,
#s5:checked ~ #slide1 {
  img {
    box-shadow: 6px 1px 69px -14px rgba(0,0,0,0.75);
  }
  transform: translate3d(65%,0,-100px) rotateY(-45deg);
}

#s1:checked ~ #slide3, #s2:checked ~ #slide4,
#s3:checked ~ #slide5, #s4:checked ~ #slide1,
#s5:checked ~ #slide2 {
  img {
    box-shadow: 6px 1px 69px -14px rgba(0,0,0,0.75);
  }
  transform: translate3d(120%,0,-200px) rotateY(-45deg);
}

var vm = new Vue({
  el: '#app'
});