///
/// Forty by HTML5 UP
/// html5up.net | @ajlkn
/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
///

/* Tiles */

.tiles {
  @include vendor('display', 'flex');
  @include vendor('flex-wrap', 'wrap');
  border-top: 0 !important;

  & + * {
    border-top: 0 !important;
  }

  article {
    @include vendor('align-items', 'center');
    @include vendor('display', 'flex');
    @include vendor(
      'transition',
      (
        'transform 0.25s ease',
        'opacity 0.25s ease',
        'filter 1s ease',
        '-webkit-filter 1s ease'
      )
    );
    @include padding(4em, 4em);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: default;
    height: 40vh;
    max-height: 40em;
    min-height: 23em;
    overflow: hidden;
    position: relative;
    width: 40%;

    .image {
      display: none;
    }

    header {
      position: relative;
      z-index: 3;
    }

    h3 {
      font-size: 1.75em;

      a {
        &:hover {
          color: inherit !important;
        }
      }
    }

    .link.primary {
      border: 0;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 4;
    }

    &:before {
      @include vendor('transition', 'opacity 0.5s ease');
      bottom: 0;
      content: '';
      display: block;
      height: 100%;
      left: 0;
      opacity: 0.85;
      position: absolute;
      width: 100%;
      z-index: 2;
    }

    &:after {
      background-color: transparentize(_palette(bg), 0.75);
      content: '';
      display: block;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }

    &:hover {
      &:before {
        opacity: 0;
      }
    }

    &.is-transitioning {
      @include vendor('transform', 'scale(0.95)');
      // @include vendor('filter', 'blur(0.5em)');
      opacity: 0;
    }

    &:nth-child(4n - 1),
    &:nth-child(4n - 2) {
      width: 60%;
    }

    &:nth-child(6n - 5) {
      &:before {
        background-color: _palette(accent1);
      }
    }

    &:nth-child(6n - 4) {
      &:before {
        background-color: _palette(accent2);
      }
    }

    &:nth-child(6n - 3) {
      &:before {
        background-color: _palette(accent3);
      }
    }

    &:nth-child(6n - 2) {
      &:before {
        background-color: _palette(accent4);
      }
    }

    &:nth-child(6n - 1) {
      &:before {
        background-color: _palette(accent5);
      }
    }

    &:nth-child(6n) {
      &:before {
        background-color: _palette(accent6);
      }
    }
  }

  @include breakpoint(large) {
    article {
      @include padding(4em, 3em);
      height: 30vh;
      max-height: 30em;
      min-height: 20em;
    }
  }

  @include breakpoint(medium) {
    article {
      width: 50% !important;
    }
  }

  @include breakpoint(small) {
    article {
      @include padding(3em, 1.5em);
      height: 16em;
      max-height: none;
      min-height: 0;

      h3 {
        font-size: 1.5em;
      }
    }
  }

  @include breakpoint(xsmall) {
    display: block;

    article {
      height: 20em;
      width: 100% !important;
    }
  }
}
