/* 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); }
.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; }