// ===
// Grid
// ===
.row {
  @include make-row();

  > * {
    @include make-col-ready();
  }
}

@include make-grid-columns();

// ===
// Container
// ===
.container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: $container;
  padding: 0 $container-gap;
  margin: 0 auto;

  @each $container,
  $value in $container-map {
    &--#{$container} {
      width: $value;
      max-width: 100vw;
      // padding: 0 $container-gap;
      margin: 0 auto;
      padding: 0 if($container == "shop", $container-shop-gap, $container-gap);
      
    }
  }
}

// ===
// Section
// ===
.section {
  padding-top: $section-padding;
  padding-bottom: $section-padding;

  @include max-lg {
    padding-top: $section-padding-lg;
    padding-bottom: $section-padding-lg;
  }

  @include max-md {
    padding-top: $section-padding-md;
    padding-bottom: $section-padding-md;
  }
}