/* Containers, sections, grid utilities */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-pad); }
.section--tint { background: var(--c-featured); }
/* Thin stats strip (just the counters) shouldn't carry a full section's padding,
   or it floats in whitespace. Tighten it so it sits closer to the flow. */
.section:has(> .container > .counters:not(.counters--mini)) { padding-block: var(--sp-5); }
.section--dark { background: var(--c-dark); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5 { color: var(--c-on-dark); }
.section--dark p { color: var(--c-on-dark-2); }

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

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }

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

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