/* =========================================
   SECTION BASE
========================================= */

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

/* tighter sections */
.section--sm {
  padding-block: var(--section-padding-sm);
}

/* larger hero sections */
.section--lg {
  padding-block: var(--section-padding-lg);
}


/* =========================================
   BACKGROUND VARIANTS
========================================= */

.section--light {
  background: var(--bg-light);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--color-white);
}


/* =========================================
   CONTENT WIDTH HELPERS
========================================= */

.section__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}

.section__narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
}