body {
  @include display(flex);
  @include flex-direction(column);
  min-height: 100vh;
}

.page-header,
.page-content,
.page-footer {
  @extend %block;
}

.page-header-inner,
.page-content-inner {
  @extend %block-inner;
}

.page-cover-image {
  @extend %fadein;
  height: 400px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  @include media($small-screen) {height: 200px;}
}

.page-content .page-title {
  @include media($small-screen) { font-size: 2.5rem; }
  font-size: 4rem;
  font-weight: 400;
  margin-top: 0;
  text-align: center;
}

.page-content .page-date {
  text-align: center;
  margin-top: -1.5rem;
  margin-bottom: 3rem;
}

.page-content {
  @include flex(1);
}

.page-content-inner {
  @extend %fadein;
  padding-bottom: $gutter;
}

.page-content-main {
  @extend %body-text;
  margin: 0 $gutter;
}

.page-footer {
  @extend %fadein;
  background-color: $light-gray;
  height: 100px;
}

body {
  @include display(flex);
  @include flex-direction(column);
  min-height: 100vh;
}

.page-header,
.page-content,
.page-footer {
  @extend %block;
}

.page-header-inner,
.page-content-inner {
  @extend %block-inner;
}

.page-cover-image {
  @extend %fadein;
  height: 400px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 1rem;

  @include media($small-screen) {height: 200px;}
}

.page-content .page-title {
  @include media($small-screen) { font-size: 2.5rem; }
  font-size: 4rem;
  font-weight: 400;
  margin-top: 0;
  text-align: center;
}

.page-content .page-date {
  text-align: center;
  margin-top: -1.5rem;
  margin-bottom: 3rem;
}

.page-content {
  @include flex(1);
}

.page-content-inner {
  @extend %fadein;
  padding-bottom: $gutter;
}

.page-content-main {
  @extend %body-text;
  margin: 0 $gutter;
}

.page-footer {
  @extend %fadein;
  background-color: $light-gray;
  height: 100px;
}

Add margin below cover image
Add margin below cover image
