// ===========================================
// Grid / Flex レイアウトシステム
// ===========================================

/* Grid
====================================== */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 45px;
  $column_arr: (1, 2, 3, 4, 5, 6, 7, 10);
  @each $num in $column_arr {
    &-column-1-#{$num} {
      grid-template-columns: repeat(#{$num}, 1fr);
    }
  }
  @each $key, $val in $breakpoint-up {
    @include mq-up($key) {
      @each $num in $column_arr {
        &-column-1-#{$num}\@#{$key} {
          grid-template-columns: repeat(#{$num}, 1fr);
        }
      }
    }
  }

  &-gap-collapse {
    gap: normal;
    @each $key, $val in $breakpoint-up {
      &\@#{$key} {
        @include mq-up($key) {
          gap: normal;
        }
      }
    }
  }
}

/* Gap
====================================== */
@for $i from 0 through 25 {
  .mm-gap-#{$i * 5} {
    gap: 5px * $i;
  }
  .mm-gap-row-#{$i * 5} {
    row-gap: 5px * $i;
  }
  .mm-gap-column-#{$i * 5} {
    column-gap: 5px * $i;
  }
}

/* Flex
====================================== */
.mm-flex {
  display: flex;

  &-center {
    justify-content: center;
  }
  &-between {
    justify-content: space-between;
  }
  &-end {
    justify-content: flex-end;
  }
  &-align-center {
    align-items: center;
  }
  &-wrap {
    flex-wrap: wrap;
  }
}

/* Span
====================================== */
.mm-span {
  @for $i from 2 through 9 {
    &-column-#{$i} {
      grid-column: span #{$i};
    }
    &-row-#{$i} {
      grid-row: span #{$i};
    }
  }
}