.l-grid {
  display: flex;
  flex-wrap: wrap;
  padding: ($gridspacing * 2) $gridspacing $gridspacing;

  .l-grid-x-griditem {
    display: flex;
    justify-content: center;
    padding: 0 8px;
    padding-bottom: $gridspacing * 2;
    width: 100%;
  }

  @media (min-width: $media-mobilelarge) {

    .l-grid-x-griditem {
      width: 50%;
    }
  }

  @media (min-width: $media-tablet) {

    padding-left: $gridspacing * 4;
    padding-right: $gridspacing * 4;

    .l-grid-x-griditem {
      width: 33.333333%
    }
  }

  @media (min-width: $media-desktop) {
    padding-top: $gridspacing * 3;
    padding-left: $gridspacing * 3.5;
    padding-right: $gridspacing * 3.5;

    .l-grid-x-griditem {
      padding: 0 12px;
      padding-bottom: $gridspacing * 3;
      width: 25%
    }
  }

  @media (min-width: $media-hd) {
    padding-left: calc(50vw - #{$container-maxwidth / 2} - 12px);
    padding-right: calc(50vw - #{$container-maxwidth / 2} - 12px);

    .l-grid-x-griditem {
      width: 20%
    }
  }

}