/**
 * @file
 * MLT Modern — Section block wrapper + section heading.
 *
 * Used to wrap a chunk of the page in consistent vertical padding, with an
 * optional .mlt-section--alt modifier for the soft-grey alternating
 * background.
 *
 * In Drupal terms: apply .mlt-section to a region or block wrapper. The
 * .mlt-section__head element holds the centred h2 + lede paragraph.
 *
 * Markup:
 *   <section class="mlt-section">
 *     <div class="mlt-section__container">
 *       <div class="mlt-section__head">
 *         <h2>How Do You Know Your Home Needs a Rewire?</h2>
 *         <p>After years of working on properties...</p>
 *       </div>
 *       ... cards / grid / whatever ...
 *     </div>
 *   </section>
 */

.mlt-section {
  padding: 70px 0;
}

.mlt-section--alt {
  background: var(--mlt-bg-soft);
}

.mlt-section__container {
  max-width: var(--mlt-container-max);
  margin: 0 auto;
  padding: 0 var(--mlt-container-pad);
}

.mlt-section__head {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 50px;
}

.mlt-section__head h2 {
  font-size: 34px;
  color: var(--mlt-primary);
  margin: 0 0 14px;
  line-height: 1.2;
  font-weight: 800;
}

.mlt-section__head p {
  font-size: 18px;
  color: var(--mlt-text-light);
  line-height: 1.5;
  margin: 0;
}