Cover

Cover Style
.cover {
  /* ↓ Establish a columnal flex context */
  display: flex;
  flex-direction: column;
  /* ↓ Set a minimum height to match the viewport height
(any minimum would be fine) */
  min-block-size: 100vh;
  /* Set a padding value */
  padding: $space-s;
}

.cover > * {
  /* ↓ Give each child a top and bottom margin */
  margin-block: $space-s;
}

.cover > :first-child:not(h1) {
  /* ↓ Remove the top margin from the first-child
if it _doesn't_ match the centered element */
  margin-block-start: 0;
}

.cover > :last-child:not(h1) {
  /* ↓ Remove the bottom margin from the last-child
if it _doesn't_ match the centered element */
  margin-block-end: 0;
}

.cover > h1 {
  /* ↓ Center the centered element (h1 here)
in the available vertical space */
  margin-block: auto;
}

Go to Cover!

Cover

Cover paragraph.