.feature-tiles {
  // $tile-accent-colors: see __vars/colours

  @media(max-width: map_get($breakpoint-stages, 'mobile-wide'))
  {
    &__item {
      margin-bottom: $spacing-lg;
    }
  }

  @media (min-width: map_get($breakpoint-stages, 'tablet-wide')) {
    @supports (display: grid) {
      display: grid;
      grid-auto-flow: dense;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(16, 1fr);

      &__item {
        position: relative;
        grid-column: span 4;
        grid-row: span 4;
        width: auto !important; // overrides fallback grid sizing

        &:nth-child(1) {
          grid-column: span 4 / -3;
          grid-row: 1 / span 4;
        }

        &:nth-child(2) {
          grid-row: 3 / span 4;
        }

        &:nth-child(3) {
          grid-row: 5 / span 4;

          &:after {
            position: absolute;
            content: '';
            width: 25%;
            height: 25%;
            top: 0;
            left: 100%;
          }
        }

        &:nth-child(4) {
          grid-row: 9 / span 4;
          grid-column: span 4 / -3;

          &:after {
            position: absolute;
            content: '';
            width: 25%;
            height: 25%;
            top: 0;
            left: 100%;
          }
        }

        &:nth-child(5) {
          grid-row: 11 / span 4;
          grid-column: 3 / span 4;
        }

        &:nth-child(6) {
          grid-row: 13 / span 4;
          grid-column: span 4 / -1;

          &:after {
            position: absolute;
            content: '';
            width: 25%;
            height: 25%;
            top: 0;
            right: 100%;
          }
        }

        &:nth-child(n):after {
          background: var(--accent-color, #{$primary});
        }
      }

      .tile__content {
        margin-right: 25%; // bit of a silly specific override, but this makes things line up with the grid/squares more nicely.
      }
    }
  }

  @keyframes tile__growIn {
    from {
      opacity: 0.75;
      transform: scale(0.9);
    }
    to   {
      opacity: 1;
      transform: scale(1);
    }
  }

  &__item {
    &.js-waypoint {
      animation-name: tile__growIn;
      animation-play-state: paused;
      animation-iteration-count: 1;
      animation-duration: 200ms;
    }

    &.is-waypoint-reached {
      animation-play-state: running;
    }
  }

  @at-root .no-js .feature-tiles__item {
    animation-play-state: running;
  }

  .title__highlight {
    --background: var(--accent-color);
  }

  @each $name, $value in $tile-accent-colors {
    &__item--accent-#{$name} {
      --accent-color: #{$value};
    }
  }

  // --

  &__square {

  }

  // --

  a.tile {
    transition: transform 200ms;

    &:hover {
      transform: scale(1.025);
      z-index: 2;
    }
  }

  &:hover {
    a.tile {
      .tile__figure {
        img {
          filter: grayscale(1);
        }
      }

      &:hover {
        .tile__figure {
          img {
            filter: grayscale(0);
          }
        }
      }
    }
  }
}