/* Component: Container */

.c-container {
  width: 100%;
  margin: 0 auto;
  padding: var(--gutter-mobile, var(--spacing-sm));
}

/* Container sizes */
.c-container--sm {
  max-width: var(--max-width-sm, 36rem);
}

.c-container--md {
  max-width: var(--max-width-md, 48rem);
}

.c-container--lg {
  max-width: var(--max-width-lg, 64rem);
}

.c-container--xl {
  max-width: var(--max-width-xl, 80rem);
}

.c-container--2xl {
  max-width: var(--max-width-2xl, 96rem);
}

.c-container--3xl {
  max-width: var(--max-width-3xl, 82.5rem);
}

/* Text alignment */
.c-container--align-left {
  text-align: left;
}

.c-container--align-center {
  text-align: center;
}

.c-container--align-right {
  text-align: right;
}

/* Tablet: increase padding */
@media (min-width: 768px) {
  .c-container {
    padding: var(--gutter-tablet, var(--spacing-base));
  }
}

/* Desktop: increase padding further */
@media (min-width: 1024px) {
  .c-container {
    padding: var(--gutter-desktop, var(--spacing-lg));
  }
}