//
// -- Start editing -- //
//
// Set the number of columns you want to use on your layout.
$grid-columns: 12 !default; // Create or remove breakpoints for your project
// Syntax:
// name SIZErem,
$breakpoints: sm 48em 46rem, md 62em 61rem, lg 75em 71rem !default;

:root {
  --md-grid-width: 100vw;
  --md-grid-max-width: 1280px;
  --md-grid-margin: var(--md-side-margin);
  --md-grid-gutter: var(--md-side-margin);
  --md-grid-columns: $grid-columns;
}
//
// -- Stop editing -- //
//

.grid {
  box-sizing: border-box;
  max-width: var(--md-grid-max-width);
  margin: 0 auto;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(var(--md-grid-columns), 1fr);
  grid-auto-rows: auto;
  grid-gap: var(--md-grid-gutter);
  padding: var(--md-grid-margin);
  justify-items: stretch;
  align-items: start;

  & .grid {
    width: 100%;
    margin: 0;
    padding: 0;
  }
}

.fluid-grid {
  width: 100%;
}
$name: xs;
@for $i from 0 through $grid-columns {
  .col-#{$name}-#{$i} {
    grid-column-end: span $i;
  }

  .col-#{$name}-offset-#{$i} {
    grid-column-start: #{$i + 1};
  }

  .col-#{$name}-justify-start {
    justify-self: start;
  }

  .col-#{$name}-justify-end {
    justify-self: end;
  }

  .col-#{$name}-justify-center {
    justify-self: center;
  }

  .col-#{$name}-justify-stretch {
    justify-self: stretch;
  }

  .col-#{$name}-align-start {
    align-self: start;
  }

  .col-#{$name}-align-end {
    align-self: end;
  }

  .col-#{$name}-align-center {
    align-self: center;
  }

  .col-#{$name}-align-stretch {
    align-self: stretch;
  }
}

.grid-#{$name}-no-margin {
  padding: 0;
}

.grid-#{$name}-no-side-margin {
  padding-left: 0;
  padding-right: 0;
}

.grid-#{$name}-no-end-margin {
  padding-top: 0;
  padding-bottom: 0;
}

.grid-#{$name}-normal-margin {
  padding: var(--md-grid-margin);
}

.grid-#{$name}-normal-side-margin {
  padding-left: var(--md-grid-margin);
  padding-right: var(--md-grid-margin);
}

.grid-#{$name}-normal-end-margin {
  padding-top: var(--md-grid-margin);
  padding-bottom: var(--md-grid-margin);
}

.grid-#{$name}-small-margin {
  padding: 4px;
}

.text-#{$name}-align-left {
  text-align: left;
}

.text-#{$name}-align-center {
  text-align: center;
}

.text-#{$name}-align-right {
  text-align: right;
}
@each $breakpoint in $breakpoints {
  $name: nth($breakpoint, 1);
  $size: nth($breakpoint, 2);
  $grid: nth($breakpoint, 3);
  @media only screen and (min-width: $size) {
    .grid {
      width: calc(100% - 2 * (var(--md-content-margin) - var(--md-grid-margin)));
    }
    @for $i from 0 through $grid-columns {
      .col-#{$name}-#{$i} {
        grid-column-end: span $i;
      }

      .col-#{$name}-offset-#{$i} {
        grid-column-start: #{$i + 1};
      }

      .col-#{$name}-justify-start {
        justify-self: start;
      }

      .col-#{$name}-justify-end {
        justify-self: end;
      }

      .col-#{$name}-justify-center {
        justify-self: center;
      }

      .col-#{$name}-justify-stretch {
        justify-self: stretch;
      }

      .col-#{$name}-align-start {
        align-self: start;
      }

      .col-#{$name}-align-end {
        align-self: end;
      }

      .col-#{$name}-align-center {
        align-self: center;
      }

      .col-#{$name}-align-stretch {
        align-self: stretch;
      }
    }

    .grid-#{$name}-no-margin {
      padding: 0;
    }

    .grid-#{$name}-no-side-margin {
      padding-left: 0;
      padding-right: 0;
    }

    .grid-#{$name}-no-end-margin {
      padding-top: 0;
      padding-bottom: 0;
    }

    .grid-#{$name}-normal-margin {
      padding: var(--md-grid-margin);
    }

    .grid-#{$name}-normal-side-margin {
      padding-left: var(--md-grid-margin);
      padding-right: var(--md-grid-margin);
    }

    .grid-#{$name}-normal-end-margin {
      padding-top: var(--md-grid-margin);
      padding-bottom: var(--md-grid-margin);
    }

    .grid-#{$name}-small-margin {
      padding: 4px;
    }

    .text-#{$name}-align-left {
      text-align: left;
    }

    .text-#{$name}-align-center {
      text-align: center;
    }

    .text-#{$name}-align-right {
      text-align: right;
    }
  }
}

.no-mt {
  margin-top: 0;
}

.no-mr {
  margin-right: 0;
}

.no-mb {
  margin-bottom: 0;
}

.no-ml {
  margin-left: 0;
}

.no-pt {
  padding-top: 0;
}

.no-pr {
  padding-right: 0;
}

.no-pb {
  padding-bottom: 0;
}

.no-pl {
  padding-left: 0;
}