/* Layout: containers and generic page structure */

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

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

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(300px, 1fr);
  align-items: start;
  gap: clamp(28px, 5vw, 64px);
}

.section-heading {
  max-width: 720px;
  margin: 0 auto 30px;
  text-align: center;
}

.section-heading p {
  margin-bottom: 0;
  font-size: var(--font-size-md);
}

@media (max-width: 560px) {
  .container {
      width: min(100% - 24px, var(--container));
    }
}