@import url('https://fonts.googleapis.com/css2?family=Grape+Nuts&display=swap');

*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: 'Grape Nuts', cursive;
  //background-color: #eee;
  background-image: linear-gradient(to right, #08c2b6, #5acbbe, #82d4c6, #a3ddd0, #c1e6dc, #c1e6dc, #c1e6dc, #c1e6dc, #a3ddd0, #82d4c6, #5acbbe, #08c2b6);
  text-align: center;
  padding: 4em 1em;
}

.gallery {
  display: grid;
  width: 100%;
  max-width: 1002px;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, 300px);
  grid-template-rows: auto;
  justify-content: center;
  margin-top: 50px;
}

figure {
  width: 300px;
  perspective: 900px;


  &:nth-child(1) { --imageUrl: url("images/mallai.png"); }
  &:nth-child(2) { --imageUrl: url("images/shanti.png"); }
  &:nth-child(3) { --imageUrl: url("images/gautam.png"); }
  &:nth-child(4) { --imageUrl: url("images/raaju.png"); }
  &:nth-child(5) { --imageUrl: url("images/biplab.png"); }
  &:nth-child(6) { --imageUrl: url("images/satya.png"); }
  &:nth-child(7) { --imageUrl: url("images/Sumit.png"); }
  &:nth-child(8) { --imageUrl: url("images/mihir.jpg"); }
  &:nth-child(9) { --imageUrl: url("images/dipshikaa.png"); }
  &:nth-child(10) { --imageUrl: url("images/reshma.jpg"); }
  &:nth-child(11) { --imageUrl: url("images/pap.jpg"); }
  &:nth-child(12) { --imageUrl: url("images/shiva.png"); }
  &:nth-child(13) { --imageUrl: url("images/kutu.png"); }
  &:nth-child(14) { --imageUrl: url("images/Sujit.png"); }
  &:nth-child(15) { --imageUrl: url("images/Raaj.png"); }
  &:nth-child(16) { --imageUrl: url("images/Siya.png"); }
  &:nth-child(17) { --imageUrl: url("images/Sarthak.png"); }
  &:nth-child(18) { --imageUrl: url("images/Souvik.png"); }
  &:nth-child(19) { --imageUrl: url("images/Ria.png"); }
  &:nth-child(20) { --imageUrl: url("images/mansuria_test.png"); }
  &:nth-child(21) { --imageUrl: url("images/mansuria_test.png"); }
  img {
    width: 100%;
  }
}


.imageRoll {
  position: relative;
  width: 300px; height: 300px;
  background-color: #fff;
  box-shadow: 1em 0.5em 2em #1234, 0 0 5em #1234 inset;

  & i {
    position: absolute;
    left: calc(100% - 1px);
    width: 6px; height: 100%;
    transform-style: preserve-3d;
    transform-origin: left;
    transition: transform 0.6s var(--delay, 0s) ease-in-out;
    background-image:
      linear-gradient(#0003, #0000 5% 95%, #0003),
      var(--imageUrl, '');
    background-position-x: calc(var(--bpx, 0) + 1px);
    background-size: 300px 300px;
  }

  & > i {
    left: 0;
    width: 5px;
  }

  &:hover i { 
    transform: rotateY(var(--angle, 0deg)) skewY(var(--skew, 0deg));
    transition-delay: var(--delay2, 0s);
  }

  $count: 60;
  $bpx: 0;
  $delay: 0;
  $angleChange: 0;
  $skew: 0;

  @for $i from 1 to $count {

    $sel: '&';
    @for $n from 0 to $i {
      $sel: $sel + ' > i';
    }

    #{$sel} {
      --bpx: #{$bpx}px;
      --delay: #{$delay}s;
      --delay2: #{0.6 - $delay}s;
      --angle: #{-10 - $angleChange}deg;
      --skew: #{$skew}deg;
    }

    $bpx: $bpx - 5;
    $angleChange: $angleChange + 0.1;
    $delay: $delay + 0.01;
    $skew: $skew - 0.1;
  }

  & > figcaption {
    position: absolute;
    text-align: center;
    padding-top: 1em;
    padding-inline: 80px 15px;
    z-index: -1;
    font-size: 25px;
    width: 100%; height: 100%;

    & strong {
      display: block;
    }
  }
}