.card
  - for i in (1..5)
    .fold

$size: 95vw;
$folds: 5;

$skew: 15deg;
$crunch: 0.6;
$duration: 4s;
$delay: 1s;

$url: url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Pittsburgh_Panorama_from_the_Duquesne_Incline.jpg/1280px-Pittsburgh_Panorama_from_the_Duquesne_Incline.jpg);

html {
  background: radial-gradient(at center right, #222, #000);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  animation: crunch $duration $delay ease-in-out infinite;

  @keyframes crunch {
    50% {
      transform: scaleX($crunch);
    }
  }
}

.card {
  display: flex;
  width: $size;
  height: 304/1280 * $size;
}

.fold {
  flex: 1;
  background: $url;
  background-size: cover;

  @for $i from 1 through $folds {
    &:nth-child(#{$i}) {
      background-position: ($i - 1) / ($folds - 1) * 100%;
    }
  }

  &:first-child {
    border-radius: 2vw 0 0 2vw;
  }
  &:last-child {
    border-radius: 0 2vw 2vw 0;
  }

  animation: $duration $delay ease-in-out infinite;

  &:nth-child(odd) {
    animation-name: odd-fold;

    @keyframes odd-fold {
      50% {
        transform: skewY($skew);
        filter: brightness(1.25);
      }
    }
  }
  &:nth-child(even) {
    animation-name: even-fold;

    @keyframes even-fold {
      50% {
        transform: skewY(-$skew);
        filter: brightness(0.75);
      }
    }
  }
}