No notes defined.

<!-- Default -->
<section class=" section -designedSection -twoColumn">
    <div class="section__container container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
        </header>
        <div class="section__content">
            <div class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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 class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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>
    </div>
</section>

<!-- -primary -->
<section class="-primary section -designedSection -twoColumn">
    <div class="section__container container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
        </header>
        <div class="section__content">
            <div class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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 class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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>
    </div>
</section>

<!-- -secondary -->
<section class="-secondary section -designedSection -twoColumn">
    <div class="section__container container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
        </header>
        <div class="section__content">
            <div class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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 class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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>
    </div>
</section>

<!-- -lightGray -->
<section class="-lightGray section -designedSection -twoColumn">
    <div class="section__container container">
        <header class="section__header">
            <div class="section__eyebrow eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Section Heading</h2>
        </header>
        <div class="section__content">
            <div class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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 class="section__item">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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>
    </div>
</section>

<!-- Customcolumns -->
<section class=" section -designedSection">
    <div class="section__container container">
        <header class="section__header">
            <div class="eyebrow -primary">interesting eyebrow</div>
        </header>
        <div class="section__content -columns">
            <div class="section__item -span-8">
                <svg viewBox="0 0 100 50">
                    <rect height="50" width="100" style="fill-opacity:.05" />
                </svg>
            </div>
            <div class="section__item -span-4">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <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>
            </div>
        </div>
    </div>
</section>

<!-- Image -->
<section class=" section -designedSection -twoColumn">
    <div class="section__container container">
        <header class="section__header">
            <div class="eyebrow -primary">interesting eyebrow</div>
            <h2 class="section__heading">Image with Text</h2>
        </header>
        <div class="section__content">
            <div class="section__item">
                <svg viewBox="0 0 100 50">
                    <rect height="50" width="100" style="fill-opacity:.05" />
                </svg>
            </div>
            <div class="section__item">
                <h3 class="section__subheading accented -secondary">Elit nulla quas possimus exercitationem</h3>
                <p>
                    Simple two column layout that can be used with video, images, or just side by side text. Adipisicing ab a aspernatur officia voluptatibus. Sint est corrupti dolore suscipit delectus Enim sequi adipisci fuga similique cum doloribus animi.
                </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>
    </div>
</section>

<!-- Video -->
<section class=" section -designedSection -twoColumn">
    <div class="section__container container">
        <div class="section__content">
            <div class="section__item">
                <iframe src="https://player.vimeo.com/video/374461341" width="100%" height="100%" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
            </div>
            <div class="section__item">
                <div class="eyebrow -secondary">within column</div>
                <h2 class="section__heading accented -secondary">Video with Text</h2>
                <p>
                    Section headings can appear either above both columns or within a column like this. Dolor eaque rerum non quis tempore? Magnam voluptatibus ut doloremque laboriosam architecto. Quo eos nesciunt aliquam architecto vitae Adipisci debitis exercitationem nostrum voluptatibus officiis dicta?
                </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>
    </div>
</section>