// Layout
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: $layout-spacing;
  padding-right: $layout-spacing;
  //width: 100%;

  $grid-spacing: ($layout-spacing / ($layout-spacing * 0 + 1)) * $html-font-size;
  max-width: $grid-spacing * 2 + $size-xl;
  @media (max-width: $size-xl) {
    max-width: $grid-spacing * 2 + $size-lg;
  }
  @media (max-width: $size-lg) {
    max-width: $grid-spacing * 2 + $size-md;
  }
  @media (max-width: $size-md) {
    max-width: $grid-spacing * 2 + $size-sm;
  }
  @media (max-width: $size-sm) {
    max-width: $grid-spacing * 2 + $size-xs;
  }
  @media (max-width: $size-xs) {
    max-width: 100%
  }
}

// Responsive breakpoint system
.show-xs,
.show-sm,
.show-md,
.show-lg,
.show-xl {
  display: none !important;
}

// Responsive grid system
.columns {
  display: flex;
  flex-wrap: wrap;
  margin-left: -$layout-spacing;
  margin-right: -$layout-spacing;

  &.col-gapless {
    margin-left: 0;
    margin-right: 0;

    & > .column {
      padding-left: 0;
      padding-right: 0;
    }
  }
  &.col-oneline {
    flex-wrap: nowrap;
    overflow-x: auto;
  }
}
.column {
  flex: 1;
  max-width: 100%;
  padding-left: $layout-spacing;
  padding-right: $layout-spacing;
}

@for $i from 1 through $grid-columns {
  .col-#{$i} {
    flex: none;
    width: 100% / $grid-columns * $i;
  }
}

.col-auto {
  flex: 0 0 auto;
  max-width: none;
  width: auto;
}
.col-mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.col-ml-auto {
  margin-left: auto;
}
.col-mr-auto {
  margin-right: auto;
}

@mixin columns($name) {
  @for $i from 1 through $grid-columns {
    .col-#{$name}-#{$i} {
      flex: none;
      width: 100% / $grid-columns * $i;
    }
  }
  .col-#{$name}-auto {
    width: auto;
  }
  .hide-#{$name} {
    display: none !important;
  }
  .show-#{$name} {
    display: block !important;
  }
}

@media (max-width: $size-xl) {
  @include columns('xl');
}
@media (max-width: $size-lg) {
  @include columns('lg');
}
@media (max-width: $size-md) {
  @include columns('md');
}
@media (max-width: $size-sm) {
  @include columns('sm');
}
@media (max-width: $size-xs) {
  @include columns('xs');
}