/* === CONTAINER === */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad-x);
}

/* === SECTION === */
.section {
  padding: var(--section-padding) 0;
}
.section--cream { background: var(--color-cream); }
.section--primary { background: var(--color-primary); color: var(--color-cream); }
.section--primary h1, .section--primary h2, .section--primary h3 { color: var(--color-cream); }

.section-head {
  text-align: center;
  margin-bottom: 48px;
}
.section-head .hairline { margin-left: auto; margin-right: auto; }

/* === GRID === */
.grid {
  display: grid;
  gap: var(--grid-gap);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--sidebar { grid-template-columns: 2fr 1fr; }

/* === RESPONSIVE === */
@media (max-width: 768px) {
  .section { padding: var(--section-padding-mobile) 0; }
  .container { padding: 0 var(--container-pad-x-mobile); }
  .grid--2, .grid--3, .grid--4, .grid--sidebar { grid-template-columns: 1fr; }
  .section-head { margin-bottom: 32px; }
}