@include pageflow-page-type(internal_links_grid);

.internal_links_page {
  nav {
    position: relative;
    max-width: 1011px;
    pointer-events: all;

    ul {
      padding: 0;
      top: 0;
      left: 0;
      width: 100%;
      margin: 0 0 30px 0;
    }

    li {
      display: inline-block;
      list-style: none;
      width: 19%;
      max-width: 192px;
      max-height: 108px;
      padding: 0 1% 1% 0;
      margin:  0 -4px -4px 0;

      @include phone {
        width: 48%;
        max-width: 350px;
        max-height: 250px;
        padding: 0 2% 1% 0;
        margin: 0 -3px -1px 0;
      }

      &.empty {
        padding: 0 1% 0 0;

        @include phone {
          display: none;
        }
      }
    }

    .title {
      display: none;
    }

    .title_hover {
      .title {
        display: block;
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        opacity: 0;
        z-index: 1;
        @include transform(translate3d(0,-50%,0));
        @include transition(opacity 500ms);
      }

      &:hover {
        .title {
          opacity: 1;
        }

        .placeholder,
        .thumbnail {
          &:after {
            opacity: 1;
          }
        }
      }

      .placeholder,
      .thumbnail {
        &:after {
          opacity: 0;
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          content: "";
          @include transition(opacity 500ms);
        }
      }
    }

    .placeholder,
    .thumbnail {
      display: block;
      width: 100%;
      padding-top: 56.25%;
      background-position: center;
      background-size: cover;
      position: relative;
      background-repeat: no-repeat;

      div {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
      }
    }

    %hero {
      max-width: 394px;
      max-height: 226px;
      width: 38.9%;

      @include phone {
        width: 98%;
        max-width: 700px;
        max-height: 600px;
        float: none;
      }

      .placeholder,
      .thumbnail {
        padding-top: 58.5%;
      }

      &.empty {
        padding-top: 22.815%;

        @include phone {
          padding-top: 0;
        }
      }
    }

    %hero_left {
      @extend %hero;
      float: left;
      margin: 0;

      @include phone {
        float: none;
      }
    }

    %hero_right {
      @extend %hero;
      float: right;
      margin: 0;
      padding: 0 1.3% 0 0px;

      @include phone {
        margin: 0;
        float: none;
      }
    }

    &[data-layout="hero_top_left"],
    &[data-layout="hero_top_right"] {
      li[data-reference-key="23"],
      li[data-reference-key="24"],
      li[data-reference-key="25"] {
        display: none;
      }
    }

    &[data-layout="hero_top_left"] {
      li:first-child {
        @extend %hero_left;
      }
    }

    &[data-layout="hero_top_right"] {
      li:first-child {
        @extend %hero_right;
      }
    }
  }
}

.text_position_right .internal_links_page {
  nav {
    margin-left: auto;
  }
}