Gradient Header

.gradient-header {
  background: linear-gradient(180deg, $gradient-header-background-color 0%, rgba(255, 230, 217, 0) 100%);

  &__body {
    display: flex;
    max-width: 64rem; //magic number
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacer-base $spacer-sm;
    margin: 0 auto;
    color: $gradient-header-text-color;
  }

  &__type {
    @extend %heading-font-bold;

    margin-bottom: $spacer-xs;
    font-size: $font-size-xs;
    text-align: center;
    text-transform: uppercase;
  }

  &__author {
    @extend %body-font-regular;

    margin-bottom: $spacer-lg;
    font-size: $font-size-xs;
    text-align: center;
  }

  &__title {
    @extend %body-font-italic;

    max-width: 60rem;
    margin-bottom: $spacer-lg;
    font-size: $font-size-xl;
    text-align: center;
  }

  &__img {
    @extend %box-shadow-primary-25-right-bottom;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .gradient-header__type {
    font-size: $font-size-base;
  }

  .gradient-header__author {
    font-size: $font-size-base;
  }

  .gradient-header__title {
    font-size: $font-size-xxl;
  }
}