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

section {
  padding: var(--space-2xl) 0;
}

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

.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }

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

@media (max-width: 768px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .split--reverse { direction: ltr; }
  section { padding: var(--space-xl) 0; }
}