Image Header

$gradient-from: rgba(0, 0, 0, 0.4);
$gradient-to: rgba(0, 0, 0, 0.1);

.image-header {
  display: flex;
  flex-direction: column;
  background-color: $image-header-bg-color;
  padding: $spacer-md;
  min-height: $fullscreen-real-mobile-height;

  &__body {
    display: flex;
    flex-grow: 1;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
  }

  &__content {
    background-color: $image-header-content-bg-color;
    padding: $spacer-base $spacer-xl;
    text-align: center;
  }

  &__headline {
    margin-bottom: $spacer-sm;
  }

  &__title {
    @extend %punch-in;

    margin-bottom: $spacer-md;
  }
}

//
// Media Queries
//

@media screen and (min-width: $grid-breakpoint-sm) {
  .image-header__body {
    align-items: center;
  }
}

@media screen and (min-width: $grid-breakpoint-md) {
  .image-header {
    min-height: $fullscreen-real-desktop-height;
  }

  .image-header__title {
    margin-bottom: $spacer-base;
  }
}