.container {
  width: 100%;
  max-width: var(--container-xl);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}
@media (max-width: 768px) {
  .container { padding-left: var(--space-4); padding-right: var(--space-4); }
}

.section      { padding-top: var(--space-24); padding-bottom: var(--space-24); }
.section-sm   { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.section-lg   { padding-top: var(--space-32); padding-bottom: var(--space-32); }

@media (max-width: 768px) {
  .section    { padding-top: var(--space-16); padding-bottom: var(--space-16); }
  .section-lg { padding-top: var(--space-20); padding-bottom: var(--space-20); }
}

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

.mx-auto { margin-left: auto; margin-right: auto; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }