///////////////////////////////
// ************************* //
//         VIDEO GRID        //
// ************************* //
///////////////////////////////

@import '../mixins/flexbox';
@import '../mixins/flex-grid';
@import '../mixins/aspect-ratio';
@import '../mixins/ease';
@import '../variables/breakpoints';

.video-grid {
  h2 {
    font-size: 1.4em; 
    font-weight: normal;
    margin-bottom: 1em;
    line-height: 1.1em;
  }
  .video-list {
    @include flexgrid($columns: 2, $gutter: 10, $padding: 0);
    list-style: none;    
  }
  .video-item {
    margin-bottom: 24px;
    outline: none;
    position: relative;
    &:hover {
      .bulbs-video-play-button {
        opacity: 1;
      }
    }
    .image {
      @include aspect-ratio(16, 9, "img");
    }
    .bulbs-video-play-button {
      bottom: 10px;
      left: 10px;
      opacity: .8;
      position: absolute;
      width: 40px;
      z-index: 1;
    }
    p {
      font-size: .85em;
      line-height: 1.3em;
      margin: .5em 0 1em; 
    }
  }
  @media (min-width: $screen-md) {
    .video-list {
      @include flexgrid($columns: 4, $gutter: 10, $padding: 0);
      list-style: none;    
    }
  }
}

