// 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;
}

.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 breakpoint(568) {
    width: 568px;
    max-width: 568px;
    padding: 0 #{$grid-space-portrait-tablet};
  }

  @include tablet-landscape-up {
    width: 768px;
    max-width: 768px;
    padding: 0 #{$grid-space-landscape-tablet};
  }
  @include desktop-up {
    width: 1024px;
    max-width: 1024px;
    padding: 0 #{$grid-space-desktop};
  }
  @include big-desktop-up {
    width: 1280px;
    max-width: 1280px;
    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 breakpoint(568) {
    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 breakpoint(568) {
    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);
  }
}