.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

.container-fluid {
  width: 100%;
  padding: 0 var(--space-4);
}

.container-sm { max-width: 640px; margin: 0 auto; padding: 0 var(--space-4); }
.container-md { max-width: 768px; margin: 0 auto; padding: 0 var(--space-4); }
.container-lg { max-width: 1024px; margin: 0 auto; padding: 0 var(--space-4); }
.container-xl { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-4); }

/* Responsive Padding */
@media (max-width: 767px) {
  .container { padding: 0 var(--space-3); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .container { padding: 0 var(--space-5); }
}

@media (min-width: 1024px) {
  .container { padding: 0 var(--space-6); }
}

@media (min-width: 1280px) {
  .container { max-width: 1280px; }
}