@mixin grid-size($page-width, $grid-height) {
  width: $page-width;
  height: $grid-height;

  .grid-pages {
    left: -$page-width;
    width: $page-width * 3;

    .grid-page {
      width: $page-width;
    }
  }
}

@mixin grid-animation($size, $page-width) {
  @-webkit-keyframes slide-left-#{$size} {
    100% {
      transform: translateX(-$page-width);
    }
  }
  @keyframes slide-left-#{$size} {
    100% {
      transform: translateX(-$page-width);
    }
  }

  @-webkit-keyframes slide-right-#{$size} {
    100% {
      transform: translateX($page-width);
    }
  }

  @keyframes slide-right-#{$size} {
    100% {
      transform: translateX($page-width);
    }
  }
}

@mixin grid-entries($num_columns, $column-width, $row-height) {
  .related-grid-entries {
    $columns: null;
    @for $i from 1 through $num_columns - 1 {
      $columns: $columns#{$column-width}#{' '}#{$grid-gap};
    }
    $columns: $columns#{' '}#{$column-width};

    -ms-grid-columns: $columns;
    grid-template-columns: $columns;

    -ms-grid-rows: $row-height $grid-gap $row-height;
    grid-template-rows: $row-height $grid-gap $row-height;
  }
}

@mixin arrow($margin-x, $margin-y) {
  .arrow {
    position: absolute;
    top: $margin-y;
    z-index: 1;

    &.arrow-right {
      right: $margin-x;
    }

    &.arrow-left {
      left: $margin-x;
    }
  }
}

$grid-width-m: 392px;
$grid-width-l: 640px;
$grid-width-xl: 830px;

$grid-height-m: 128px;
$grid-height-l: 310px;
$grid-height-xl: 310px;

$num-columns-m: 2;
$num-columns-l: 3;
$num-columns-xl: 4;

$row-height-m: 56px;
$row-height-l: 147px;
$row-height-xl: 147px;

$column-width-m: minmax(188px, 208px);
$column-width-l: minmax(174px, 202.6px);
$column-width-xl: minmax(174px, 195.5px);

$arrow-margin-x-m: -36px;
$arrow-margin-x-l: -48px;
$arrow-margin-x-xl: -48px;

$arrow-margin-y-m: 48px;
$arrow-margin-y-l: 127px;
$arrow-margin-y-xl: 127px;

$grid-gap: 16px;

@include grid-animation("m", $grid-width-m);
@include grid-animation("l", $grid-width-l);
@include grid-animation("xl", $grid-width-xl);

.medium {
  @include arrow($arrow-margin-x-m, $arrow-margin-y-m);

  .related-grid {
    @include grid-size($grid-width-m, $grid-height-m);
    @include grid-entries($num-columns-m, $column-width-m, $row-height-m);

    &.slide-left {
      .grid-pages {
        -webkit-animation-name: slide-left-m;
                animation-name: slide-left-m;
      }  
    }
    &.slide-right {
      .grid-pages {
        -webkit-animation-name: slide-right-m;
                animation-name: slide-right-m;
      }  
    }
  }
}

.large {
  @include arrow($arrow-margin-x-l, $arrow-margin-y-l);

  .related-grid {
    @include grid-size($grid-width-l, $grid-height-l);
    @include grid-entries($num-columns-l, $column-width-l, $row-height-l);

    &.slide-left {
      .grid-pages {
        -webkit-animation-name: slide-left-l;
                animation-name: slide-left-l;
      }  
    }
    &.slide-right {
      .grid-pages {
        -webkit-animation-name: slide-right-l;
                animation-name: slide-right-l;
      }  
    }
  }
}

.extra-large {
  @include arrow($arrow-margin-x-xl, $arrow-margin-y-xl);

  .related-grid {
    @include grid-size($grid-width-xl, $grid-height-xl);
    @include grid-entries($num-columns-xl, $column-width-xl, $row-height-xl);

    &.slide-left {
      .grid-pages {
        -webkit-animation-name: slide-left-xl;
                animation-name: slide-left-xl;
      }  
    }
    &.slide-right {
      .grid-pages {
        -webkit-animation-name: slide-right-xl;
                animation-name: slide-right-xl;
      }  
    }
  }
}

.related-grid {
  overflow: visible;
  position: relative;

  .grid-pages {
    display: flex;
    position: absolute;
    -webkit-animation-duration: 0.3s;
            animation-duration: 0.3s;
    -webkit-animation-timing-function: ease;
            animation-timing-function: ease;
    -webkit-animation-direction: normal;
            animation-direction: normal;

    .grid-page {
      display: flex;
      visibility: hidden;

      &.active {
        visibility: visible;
      }

      .related-grid-entries {
        display: -ms-grid;
        display: grid;

        .grid-entry {
          width: -webkit-fit-content;
          width: -moz-fit-content;
          width: fit-content;
        }
      }
    }
  }

  &.slide-right {
    overflow: hidden;

    .grid-page:nth-child(1) {
      visibility: visible;
    }
  }

  &.slide-left {
    overflow: hidden;

    .grid-page:nth-child(3) {
      visibility: visible;
    }
  }
}

.row-0 {
  -ms-grid-row: 1;
  grid-row: 1;
}

.row-1 {
  -ms-grid-row: 3;
  grid-row: 3;
}

.col-0 {
  -ms-grid-column: 1;
  grid-column: 1;
}

.col-1 {
  -ms-grid-column: 3;
  grid-column: 3;
}

.col-2 {
  -ms-grid-column: 5;
  grid-column: 5;
}

.col-3 {
  -ms-grid-column: 7;
  grid-column: 7;
}