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

.section {
  padding-block: var(--space-7);
  border-bottom: var(--rule);
}

.section:last-of-type {
  border-bottom: none;
}

.section--tight {
  padding-block: var(--space-5);
}

.stack > * + * {
  margin-top: var(--space-3);
}

.stack-lg > * + * {
  margin-top: var(--space-5);
}

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

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

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

@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-5); }
}

.hairline {
  border: none;
  border-top: var(--rule);
  margin-block: var(--space-4);
}

.hairline--olive {
  border-top: var(--rule-olive);
}