sutter/helloFront

/** ======================================
 * Layout : Grid
 * ======================================= */

.l-grid {
  display: flex;
  flex-wrap: wrap;
  + .l-grid {
    margin-top: $gutter-width;
    @media #{$mobileUp} {
      margin-top: $gutter-width/2;
    }
  }
  @media #{$mobileUp} {
    margin: -$gutter-width/2;
  }
}

.l-grid__item {
  @media #{$mobile} {
    width: 100%;
    &:not(:first-child) {
      margin-top: $gutter-width;
    }
  }
  @media #{$mobileUp} {
    margin: $gutter-width/2;
    width: calc(100% - #{$gutter-width});
  }
}

/**
 * Modifier : column
 * --------------------------------------- */

@media #{$mobileUp} and #{$tabletUp} {
  @include gridItem(s);
}

@media #{$mobileUp} {
  @include gridItem(s-up);
}

@media #{$tabletUp} and #{$desktop} {
  @include gridItem(m);
}

@media #{$tabletUp} {
  @include gridItem(m-up);
}

@media #{$desktopUp} {
  @include gridItem(l-up);
}