// Container will always be grid... If not supported then it will just be the width it needs to be...
%container-core {
  margin: auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-height: 100%;
  height: 100%;
  position: relative;
}

.container,
.container-fluid {
  @extend %container-core;

  &--grid {
    display: grid;
    @extend %container-core;

    @include mobile-only {
      grid-template-columns: repeat($grid-columns-mobile, 1fr);
      grid-column-gap: calc(#{$grid-space-mobile} * 2);
      padding: 0 $grid-space-mobile;
    }
    @include tablet-portrait-up {
      grid-template-columns: repeat($grid-columns-portrait-tablet, 1fr);
      grid-column-gap: calc(#{$grid-space-portrait-tablet} * 2);
      padding: 0 $grid-space-portrait-tablet;
    }

    @include tablet-landscape-up {
      grid-template-columns: repeat($grid-columns-landscape-tablet, 1fr);
      grid-column-gap: calc(#{$grid-space-landscape-tablet} * 2);
      padding: 0 $grid-space-landscape-tablet;
    }
    @include desktop-up {
      grid-template-columns: repeat($grid-columns-desktop, 1fr);
      grid-column-gap: calc(#{$grid-space-desktop} * 2);
      padding: 0 $grid-space-desktop;
    }
    @include big-desktop-up {
      grid-template-columns: repeat($grid-columns-big-desktop, 1fr);
      grid-column-gap: calc(#{$grid-space-big-desktop} * 2);
      padding: 0 $grid-space-big-desktop;
    }

    .row {
      grid-column: 1 / -1;

      @include mobile-only {
        margin: 0 #{-$grid-space-mobile};
      }
      @include tablet-portrait-up {
        margin: 0 #{-$grid-space-portrait-tablet};
      }

      @include tablet-landscape-up {
        margin: 0 #{-$grid-space-landscape-tablet};
      }
      @include desktop-up {
        margin: 0 #{-$grid-space-desktop};
      }
      @include big-desktop-up {
        margin: 0 #{-$grid-space-big-desktop};
      }
    }
  }
}

.container {
  width: 100%;
  max-width: 100%;
  padding: 0 #{$grid-space-big-desktop};

  @include mobile-only {
    width: 100%;
    max-width: 100%;
    padding: 0 #{$grid-space-mobile};
  }

  @include tablet-portrait-up {
    width: 600px;
    max-width: 600px;
    padding: 0 #{$grid-space-portrait-tablet};
  }

  @include tablet-landscape-up {
    width: 900px;
    max-width: 900px;
    padding: 0 #{$grid-space-landscape-tablet};
  }
  @include desktop-up {
    width: 1200px;
    max-width: 1200px;
    padding: 0 #{$grid-space-desktop};
  }
  @include big-desktop-up {
    width: 1800px;
    max-width: 1800px;
    padding: 0 #{$grid-space-big-desktop};
  }

  // If doesn't support grid display: block;
  @supports not (display: grid) {
    display: block;
  }
}

.container-fluid {
  width: 100%;
  max-width: 100%;

  @include mobile-only {
    padding: 0 #{$grid-space-mobile};
  }

  @include tablet-portrait-up {
    padding: 0 #{$grid-space-portrait-tablet};
  }

  @include tablet-landscape-up {
    padding: 0 #{$grid-space-landscape-tablet};
  }
  @include desktop-up {
    padding: 0 #{$grid-space-desktop};
  }
  @include big-desktop-up {
    padding: 0 #{$grid-space-big-desktop};
  }

  // If doesn't support grid display: block;
  @supports not (display: grid) {
    display: block;
  }
}

.grid-gap {
  @include mobile-only {
    grid-gap: calc(#{$grid-space-mobile} * 2);
  }

  @include tablet-portrait-up {
    grid-gap: calc(#{$grid-space-portrait-tablet} * 2);
  }

  @include tablet-landscape-up {
    grid-gap: calc(#{$grid-space-landscape-tablet} * 2);
  }

  @include desktop-up {
    grid-gap: calc(#{$grid-space-desktop} * 2);
  }

  @include big-desktop-up {
    grid-gap: calc(#{$grid-space-big-desktop} * 2);
  }
}