@use '../breakpoints';

.layout {
  width: var(--l-width);
  margin: 0 var(--l-gutter);
  @each $key, $val in breakpoints.$map {
    @include breakpoints.gte($key) {
      &.disabled-#{$key} {
        width: auto;
        margin: 0;
      }
      &:not(.disabled-#{$key}) {
        width: var(--l-width);
        margin: 0 var(--l-gutter);
      }
    }
  }
}

.mobile {
  --l-gutter: 16px;
  --l-width: calc(100vw - (2 * var(--l-gutter)));
  @include breakpoints.gte('mm') {
    --l-width: 656px;
    --l-gutter: auto;
  }
  @include breakpoints.gte('ml') {
    --l-width: 672px;
    --l-gutter: auto;
  }
  @include breakpoints.gte('xs') {
    --l-width: 792px;
    --l-gutter: auto;
  }
}

.desktop {
  min-width: 896px;
  --l-gutter: 64px;
  --l-width: calc(100vw - (2 * var(--l-gutter)));
  @include breakpoints.gte('l') {
    --l-width: 1472px;
    --l-gutter: auto;
  }
  @include breakpoints.gte('xl') {
    --l-width: 1504px;
    --l-gutter: auto;
  }
}