.gutter {
  margin-left: -15px;
  margin-right: -15px;
}
.gutter > * {
  padding-left: 15px;
  padding-right: 15px;
}
.gutter--var {
  margin-left: calc(-0.5 * var(--spacing-mobile));
  margin-right: calc(-0.5 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--var {
    margin-left: calc(-0.5 * var(--spacing-tablet));
    margin-right: calc(-0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--var {
    margin-left: calc(-0.5 * var(--spacing-desktop));
    margin-right: calc(-0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--var {
    margin-left: calc(-0.5 * var(--spacing-large));
    margin-right: calc(-0.5 * var(--spacing-large));
  }
}
.gutter--var > * {
  padding-left: calc(0.5 * var(--spacing-mobile));
  padding-right: calc(0.5 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--var > * {
    padding-left: calc(0.5 * var(--spacing-tablet));
    padding-right: calc(0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--var > * {
    padding-left: calc(0.5 * var(--spacing-desktop));
    padding-right: calc(0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--var > * {
    padding-left: calc(0.5 * var(--spacing-large));
    padding-right: calc(0.5 * var(--spacing-large));
  }
}
.gutter--v {
  margin-bottom: -30px;
}
.gutter--v > * {
  padding-bottom: 30px;
}
.gutter--v--var {
  margin-top: calc(-0.5 * var(--spacing-mobile));
  margin-bottom: calc(-0.5 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--v--var {
    margin-top: calc(-0.5 * var(--spacing-tablet));
    margin-bottom: calc(-0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--v--var {
    margin-top: calc(-0.5 * var(--spacing-desktop));
    margin-bottom: calc(-0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--v--var {
    margin-top: calc(-0.5 * var(--spacing-large));
    margin-bottom: calc(-0.5 * var(--spacing-large));
  }
}
.gutter--v--var > * {
  padding-top: calc(0.5 * var(--spacing-mobile));
  padding-bottom: calc(0.5 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--v--var > * {
    padding-top: calc(0.5 * var(--spacing-tablet));
    padding-bottom: calc(0.5 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--v--var > * {
    padding-top: calc(0.5 * var(--spacing-desktop));
    padding-bottom: calc(0.5 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--v--var > * {
    padding-top: calc(0.5 * var(--spacing-large));
    padding-bottom: calc(0.5 * var(--spacing-large));
  }
}
.gutter--v--double {
  margin-top: calc(-1 * var(--spacing-mobile));
  margin-bottom: calc(-1 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--v--double {
    margin-top: calc(-1 * var(--spacing-tablet));
    margin-bottom: calc(-1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--v--double {
    margin-top: calc(-1 * var(--spacing-desktop));
    margin-bottom: calc(-1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--v--double {
    margin-top: calc(-1 * var(--spacing-large));
    margin-bottom: calc(-1 * var(--spacing-large));
  }
}
.gutter--v--double > * {
  padding-top: calc(1 * var(--spacing-mobile));
  padding-bottom: calc(1 * var(--spacing-mobile));
}
@media (min-width: 768px) {
  .gutter--v--double > * {
    padding-top: calc(1 * var(--spacing-tablet));
    padding-bottom: calc(1 * var(--spacing-tablet));
  }
}
@media (min-width: 992px) {
  .gutter--v--double > * {
    padding-top: calc(1 * var(--spacing-desktop));
    padding-bottom: calc(1 * var(--spacing-desktop));
  }
}
@media (min-width: 1200px) {
  .gutter--v--double > * {
    padding-top: calc(1 * var(--spacing-large));
    padding-bottom: calc(1 * var(--spacing-large));
  }
}
@media (min-width: 992px) {
  .gutter--2 {
    margin-left: -15px;
    margin-right: -15px;
  }
  .gutter--2 > * {
    padding-left: 15px;
    padding-right: 15px;
  }
}
@media (min-width: 1200px) {
  .gutter--3 {
    margin-left: -15px;
    margin-right: -15px;
  }
  .gutter--3 > * {
    padding-left: 15px;
    padding-right: 15px;
  }
}