/*
 * Sandrine Gluck
 * Layout foundations
 */

.sg-container {
  width: min(
    calc(100% - (2 * var(--sg-gutter-desktop))),
    var(--sg-container)
  );
  margin-inline: auto;
}

.sg-section {
  position: relative;
  width: 100%;
}

.sg-section--white {
  background: var(--sg-white);
  color: var(--sg-charcoal);
}

.sg-section--black {
  background: var(--sg-black);
  color: var(--sg-white);
}

.sg-section--beige {
  background: var(--sg-beige);
  color: var(--sg-black);
}

.sg-section--offwhite {
  background: var(--sg-offwhite);
  color: var(--sg-charcoal);
}

@media (max-width: 980px) {
  .sg-container {
    width: min(
      calc(100% - (2 * var(--sg-gutter-tablet))),
      var(--sg-container)
    );
  }
}

@media (max-width: 767px) {
  .sg-container {
    width: min(
      calc(100% - (2 * var(--sg-gutter-mobile))),
      var(--sg-container)
    );
  }
}