// gradient overlay -- mainly used for readability of text on media items

@include viewport--l {
  .gradient-overlay {
    &::before {
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%;
      z-index: 1;
    }
    @include gradient-overlay;
  }
}