/**
 * Layout utility classes.
 */

@media (width < 400px) {
  .container {
    --width-container: var(--width-small);
  }
}

@media (952px <= width < 1138px) {
  .container {
    --width-container: var(--width-medium);
  }
}

@media (width >= 1138px) {
  .container {
    --width-container: var(--width-large);
  }
}

.container {
  max-width: var(--width-container);
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--spacing-padding-horizontal);
  padding-left: var(--spacing-padding-horizontal);
}