/* Container Component
   ========================================================================== */

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4, 1rem);
}

/* Container Sizes */
.container--sm {
  max-width: 640px;
}

.container--default {
  max-width: 1024px;
}

.container--lg {
  max-width: 1280px;
}

.container--xl {
  max-width: 1536px;
}

/* Fluid Container (no max-width) */
.container--fluid {
  max-width: none;
}

/* Responsive Container */
@media (min-width: 640px) {
  .container {
    padding-inline: var(--space-6, 1.5rem);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--space-8, 2rem);
  }
}