Base

<!-- Default -->
<section class=" section">
    <div class="section__container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
            <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
        </header>
        <div class="section__content">
            <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            <p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
        </div>
    </div>
</section>

<!-- -primary -->
<section class="-primary section">
    <div class="section__container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
            <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
        </header>
        <div class="section__content">
            <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            <p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
        </div>
    </div>
</section>

<!-- -secondary -->
<section class="-secondary section">
    <div class="section__container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
            <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
        </header>
        <div class="section__content">
            <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            <p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
        </div>
    </div>
</section>

<!-- -lightGray -->
<section class="-lightGray section">
    <div class="section__container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
            <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
        </header>
        <div class="section__content">
            <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            <p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
        </div>
    </div>
</section>

<!-- Introduction -->
<section class=" section">
    <div class="section__container">
        <header class="section__header">
            <div class="eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
            <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
        </header>
        <div class="section__introduction -emphasized">
            <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            <p>Dolor iste quo nostrum in perspiciatis adipisci cum? Dolorem fuga itaque non ipsum facere assumenda? Eum est quasi praesentium quo libero? Soluta accusantium accusamus animi quidem corrupti Nemo laboriosam perspiciatis</p>
        </div>
    </div>
</section>