$items: 2;
$animation-time: 25s;
$transition-time: 0.5s;
$scale: 20%;
$total-time: ($animation-time * $items);
$scale-base-1: (1 + $scale / 100%);

.slideshow {
  width: 100%;
  overflow: hidden;
  background-repeat: no-repeat; 
  background-position: center 0;
  height: 185px;
  @media screen and (min-width: 40.000em) {
    height: 300px;
  }
  @media screen and (min-width: 64.000em) {
    height: 335px;
    background-size: 100%;
  }
  &-image {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: no-repeat center 0;
    animation-name: kenburns;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: $total-time;
    opacity: 1;
    transform: scale($scale-base-1);
    @media screen and (min-width: 64.000em) {
      background-size: 100%;
    }
  
    @for $i from 1 through $items {
      &:nth-child(#{$i}) {
        animation-name: kenburns-#{$i};
        z-index: ($items - $i);
      }
    }
  }
}

@for $i from 1 through $items {
  @keyframes kenburns-#{$i} {
    $animation-time-percent: percentage($animation-time / $total-time);
    $transition-time-percent: percentage($transition-time / $total-time);
    
    $t1: ($animation-time-percent * ($i - 1) - $transition-time-percent / 2);
    $t2: ($animation-time-percent * ($i - 1) + $transition-time-percent / 2);
    @if($t1 < 0%) { $t1: 0%; }
    @if($t2 < 0%) { $t2: 0%; }

    $t3: ($animation-time-percent * ($i) - $transition-time-percent / 2);
    $t4: ($animation-time-percent * ($i) + $transition-time-percent / 2);
    @if($t3 > 100%) { $t3: 100%; }
    @if($t4 > 100%) { $t4: 100%; }

    $t5: (100% - $transition-time-percent / 2);
    $t6: (($t4 - $t1) * 100% / $t5);

    #{$t1} { opacity: 1; transform: scale($scale-base-1); }
    #{$t2} { opacity: 1; }
    #{$t3} { opacity: 1; }
    #{$t4} { opacity: 0; transform: scale(1); }
    
    @if($i != $items) {
      100% { opacity: 0; transform: scale($scale-base-1); }
    }
    
    @if($i == 1) {
      $scale-plus: ($scale * (100% - $t5) / $t4);
      $scale-plus-base-1: (1 + ($scale + $scale-plus) / 100%);
    
      #{$t5} { opacity: 0; transform: scale($scale-plus-base-1); }
      100% { opacity: 1; }
    }
  }
}