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