/* ==========================================================
   AJEC DESIGN SYSTEM
   UTILITIES
========================================================== */

.ajec-section {
  padding: var(--ajec-space-2xl) 0;
}

.ajec-container {
  max-width: var(--ajec-container);
  margin: 0 auto;
  padding: 0 var(--ajec-space-md);
}

.ajec-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--ajec-space-sm);

  margin-bottom: var(--ajec-space-lg);
}

.ajec-surface {
  background: var(--ajec-surface);
}

.ajec-section--surface {
  background: var(--ajec-surface);
}

.ajec-section--muted {
  background: var(--ajec-surface-muted);
}

.ajec-section--accent {
  background: var(--ajec-surface-accent);
}

@media (max-width: 768px) {
  .ajec-container {
    padding: 0 var(--ajec-space-xs);
  }
}

.ajec-text-small {
  font-size: var(--ajec-font-small);
}