_headers.scss

@mixin header-hero {
  position: relative;
  overflow: hidden;
  background-color: $base-background-color;

  @media only screen and (max-width: $small-screen-max) {
    @include display(flex);
    @include align-items(center);
  }

  &__text {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(flex-start);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-top: $base-margin;
    padding-bottom: $base-margin;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
      padding-top: $header-top-bottom-padding;
      padding-bottom: $header-top-bottom-padding;
    }

    h1 {
      margin-top: 0;
      margin-bottom: $header-headline-bottom-margin;
      line-height: normal;
      color: $hero-text-color;

      @media only screen and (max-width: $small-screen-max) {
        margin-bottom: 0;
      }
    }

    p {
      max-width: 28em;
      margin-bottom: 0;
      font-size: $hero-text-size;
      color: $hero-text-color;
    }
  }
}

@mixin header-hero--home($background-image-large, $background-image-medium: nil) {
  position: relative;
  min-height: $header-height-large;
  overflow: hidden;
  background-color: $base-background-color;
  background-image: url(asset_path(#{$background-image-large}));
  background-size: auto $header-height-large;
  background-position: right bottom;
  background-repeat: repeat no-repeat;

  @media only screen and (max-width: $medium-screen-max) {
    background-image: url(asset_path(#{$background-image-medium}));
  }

  @media only screen and (max-width: $small-screen-max) {
    @include display(flex);
    @include align-items(center);
    background-size: cover;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include dayAfterTomorrowGradientTransparent;
  }

  &__text {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(flex-start);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    padding-top: $base-margin;
    padding-bottom: $base-margin;

    @media only screen and (max-width: $small-screen-max) {
      position: relative;
    }

    h1 {
      margin-top: 0;
      line-height: normal;
      color: $hero-text-color-dark;
    }

    p {
      margin-bottom: 0;
      font-size: $hero-text-size;
      color: $hero-text-color-dark;
    }
  }
}

@mixin header--large($background-image-large, $background-image-medium: nil) {
  @include header-hero;
  min-height: $header-height-product;
  background-image: url(asset_path(#{$background-image-large}));
  background-size: auto $header-height-product;
  background-position: right bottom;
  background-repeat: repeat no-repeat;

  @media only screen and (max-width: $medium-screen-max) {
    background-image: url(asset_path(#{$background-image-medium}));
  }

  @media only screen and (max-width: $small-screen-max) {
    min-height: unset;
  }

  &:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    @include cbGradientTransparent;
  }

}

@mixin header--large--left {
  @media only screen and (max-width: $small-screen-max) {
    background-image: none;
  }

  &__text {
    p {
      @media only screen and (max-width: $small-screen-max) {
        display: none;
      }
    }
  }

  &:before {
    @media only screen and (max-width: $small-screen-max) {
      @include cbGradient;
    }
  }
}

@mixin header--large--centered {
  &__text {
    text-align: center;
    align-items: center;

    h1 {
      max-width: 32ch;
    }

    p {
      max-width: 65ch;
    }
  }
}