.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.container-narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

.section {
  padding: var(--section) 0;
}

.section-sm {
  padding: var(--section-sm) 0;
}

.section-lg {
  padding: var(--section-lg) 0;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-sidebar { grid-template-columns: 1fr 2fr; }
  .section { padding: var(--section-sm) 0; }
  .section-lg { padding: var(--section) 0; }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .section { padding: var(--section-lg) 0; }
  .section-lg { padding: var(--section-lg) 0; }
}

.divider {
  width: 100%;
  height: 1px;
  background: var(--rule);
}