@layer components {
.container {
  width: 100%;
  max-width: var(--container-lg);
  margin-inline: auto;
  padding-inline: var(--spacing-4);
}

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

.container.container--md {
  max-width: var(--container-md);
}

.container.container--lg {
  max-width: var(--container-lg);
}

.container.container--xl {
  max-width: var(--container-xl);
}

.container.container--2xl {
  max-width: var(--container-2xl);
}

.container.container--fluid {
  max-width: none;
}

/* Container variants */
.container.container--narrow {
  padding-inline: var(--spacing-8);
}

.container.container--wide {
  padding-inline: var(--spacing-2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .container {
    padding-inline: var(--spacing-3);
  }

  .container.container--narrow {
    padding-inline: var(--spacing-4);
  }
}

@media (max-width: 480px) {
  .container {
    padding-inline: var(--spacing-2);
  }

  .container.container--narrow {
    padding-inline: var(--spacing-3);
  }
}
}