/*
 * Threshold until section-gutter collapses
 * calc(var(--area-width) + 31px)
 */

@custom-media --section-gutter-max (max-width: 1264px);

%section-gutter-padding {
  & {
    padding: 16px;
  }

  @media (--section-gutter-max) {
    padding: 8px;
  }
}

%section-gutter-horizontal-margin--1 {
  & {
    margin: -16px;
  }

  @media (--section-gutter-max) {
    margin: -8px;
  }
}

%section-gutter-margin-top {
  & {
    margin-top: 16px;
  }

  @media (--section-gutter-max) {
    margin-top: 8px;
  }
}

%section-gutter-margin-bottom {
  & {
    margin-bottom: 16px;
  }

  @media (--section-gutter-max) {
    margin-bottom: 8px;
  }
}

%section-gutter-margin-left {
  & {
    margin-left: 16px;
  }

  @media (--section-gutter-max) {
    margin-left: 8px;
  }
}

%section-gutter-margin-right {
  & {
    margin-right: 16px;
  }

  @media (--section-gutter-max) {
    margin-right: 8px;
  }
}

%section-gutter-margin-left--1 {
  & {
    margin-left: -16px;
  }

  @media (--section-gutter-max) {
    margin-left: -8px;
  }
}

%section-gutter-margin-right--1 {
  & {
    margin-right: -16px;
  }

  @media (--section-gutter-max) {
    margin-right: -8px;
  }
}
