.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-8);
}
.container-sm { max-width: var(--container-sm); }
.container-md { max-width: var(--container-md); }
.container-lg { max-width: var(--container-lg); }

.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }
.section-lg { padding-block: var(--space-24); }

.section-alt { background: var(--color-bg-alt); }
.section-dark { background: var(--color-bg-hero); }
.section-brand { background: var(--color-green-400); }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
.grid-3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.grid-4 { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6); }
.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

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

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-hero { grid-template-columns: 1fr !important; }
  .grid-about { grid-template-columns: 1fr !important; }
  .grid-contact { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {
  .container { padding-inline: var(--space-5); }
  .section { padding-block: var(--space-12); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .hide-mobile { display: none; }
  .mobile-first { order: -1; }
}

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