
.partners-grid {
    padding: 30px 0 65px;
    text-align: center;
    background-color: $colour-smoke-grey;
    .view-content {
      @include container;
      .item-list + .item-list {
        margin-top: 40px;
      }
      h2 {
        width: 97.5%;
        margin-right: 1.25%;
        margin-left: 1.25%;
        margin-top: calc(6 * #{gutter()});
        @include breakpoint($screen-md) {
          margin-top: calc(2 * #{gutter()});
        }
      }
      ul {
        padding: 0 gutter();
        @include clearfix;
        li {
          @include span(6);
          margin-top: gutter();
          margin-bottom: gutter();
          @include breakpoint($screen-md) {
            @include span(3);
          }
          .node__content {
            position: relative;
  
            .partner__link a {
              display: block;
  
              img {
                position: relative;
                display: block;
                max-width: 100%;
                height: auto;
              }
  
              span {
                position: absolute;
                clip: rect(1px, 1px, 1px, 1px);
                display: none;
              }
              
              &:hover {
                span {
                  display: block;
                  top: 50%;
                  left: 0;
                  width: 100%;
                  color: $colour-white;
                  font-family: "GT-Walsheim-Bold",helvetica,arial,sans-serif;
                  font-size: 18px;
                  line-height: 18px;
                  text-align: center;
                  transform: translateY(-50%);
                  clip: auto;
                  z-index: 5;
                }
  
                &:after {
                  position: absolute;
                  display: block;
                  content: '';
                  top: 0;
                  right: 0;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background-color: $colour-red;
                }
  
              }  
            }
          }
        }
      }
    }
  }
  
  /* 
   * Removing the 'hover' state for touch devices,
   * to be handled by JS to deal with proper events to only change on tap, not scroll
   * Needing to check both classes to get around Chrome bug (returning both as true)
   */
  .touchevents:not(.no-touchevents) {
    .partners-grid ul li .node__content {
      &.active .partner__link a {
        display: block;
      }
    }
}
