1
2
3
{
  "title": "Research Archive"
}

1
2
3
<header class="m-section-header">
	<h1 class="m-section-header__title">{{ title }}</h1>
</header>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
$m-section-header: (
  "small-": 132px,
  "medium+": 176px,
  "xlarge+": 204px,
);

.m-section-header {
  @include theme-contrast;
  background-color: var(--color--background);
  @include background-fill;

  &:first-child {
    margin-top: -50vh;
    padding-top: 50vh;
  }

  @each $name, $height in $m-section-header {
    @include breakpoint("#{$name}") {
      min-height: calc(50vh + #{$height});
    }
  }

  &__title {
    @include spacing(
      (
        xsmall: 12px,
      )
    );
    @include f-display-1;
  }
}