.container {
  width: min(var(--max-width), 100% - var(--space-xl) * 2);
  margin-inline: auto;
}

.grid {
  display: grid;
  gap: var(--space-lg);
}

.grid-auto {
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
}

.flex { display: flex; gap: var(--space-md); }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }

.section {
  padding-block: var(--space-4xl);
}

@media (max-width: 768px) {
  .section { padding-block: var(--space-2xl); }
}