1c652ed18SDixsie Wolmers/**
2c652ed18SDixsie Wolmers * Used for section layout. This should be used for the page container
3c652ed18SDixsie Wolmers * Mark up
4*30d7c637SDerick Montague <section class="section">
5*30d7c637SDerick Montague   <div class="section-header">
6c652ed18SDixsie Wolmers    <h2 class="section-title">Section Title</h2>
7*30d7c637SDerick Montague    ... any element added here will be right aligned
8*30d7c637SDerick Montague   </div>
9c652ed18SDixsie Wolmers   <div class="section-content">
10c652ed18SDixsie Wolmers     ...
11c652ed18SDixsie Wolmers    </div>
12c652ed18SDixsie Wolmers    <div class="section-content">
13c652ed18SDixsie Wolmers     ...
14c652ed18SDixsie Wolmers    </div>
15*30d7c637SDerick Montague </section>
16c652ed18SDixsie Wolmers */
17c652ed18SDixsie Wolmers
18c652ed18SDixsie Wolmers.section {
19c652ed18SDixsie Wolmers  margin-bottom: 3rem;
20c652ed18SDixsie Wolmers}
21c652ed18SDixsie Wolmers
22*30d7c637SDerick Montague.section-header {
23*30d7c637SDerick Montague  display: flex;
24*30d7c637SDerick Montague  justify-content: space-between;
25c652ed18SDixsie Wolmers  border-bottom: 1px solid $border-color-01;
26c652ed18SDixsie Wolmers  padding-bottom: 0.5rem;
27c652ed18SDixsie Wolmers  margin-bottom: 1.5rem;
28c652ed18SDixsie Wolmers}
29c652ed18SDixsie Wolmers
30*30d7c637SDerick Montague.section-title {
31*30d7c637SDerick Montague  margin-bottom: 0;
32*30d7c637SDerick Montague}
33*30d7c637SDerick Montague
34c652ed18SDixsie Wolmers.section-content {
35c652ed18SDixsie Wolmers  margin-top: 0;
36*30d7c637SDerick Montague  margin-bottom: 0;
37*30d7c637SDerick Montague
38*30d7c637SDerick Montague  + .section-content {
39*30d7c637SDerick Montague    margin-top: 1.5rem;
40*30d7c637SDerick Montague  }
41c652ed18SDixsie Wolmers}
42