.header {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}

.home .header {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  height: 540px;

  @media #{$breakpoint-large} {
    height: 880px;
    .header__inside {
      position: relative;
      z-index: 99;
    }
  }
}

.home #content {
  margin-top: -540px;
  background: transparent;

  @media #{$breakpoint-large} {
    margin-top: -880px;
  }
}

.home .entry-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: rem(540);

  @media #{$breakpoint-large} {
    height: rem(160);
    margin: rem(80) 0 0;
  }

  .entry-title {
    font-family: $font-family-sans-serif;
    font-size: 1.875rem;
    @media #{$breakpoint-large} {
      font-size: 3.25rem;
      line-height: 1.25em;
      margin-top: 1.5em;
    }
    margin-bottom: 0;
    text-align: center;
    max-width: 100%;
  }

  .entry-description {
    font-family: $font-family-sans-serif;
    font-size: 1.125rem;
    @media #{$breakpoint-large} {
      font-size: 2rem;
    }
    margin-top: 0;
    margin-bottom: 0;
    text-align: center;
    max-width: 100%;
  }
}

.page:not(.home) .header {
  height: rem(240);

  @media #{$breakpoint-large} {
    height: rem(880);
  }
}

.page.catalog {
  .header {
    height: rem(381);
  }

  .page-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: rem(380);
    margin-top: rem(-380);
  }

  @media #{$breakpoint-large} {
    .header {
      height: rem(450);
    }

    .page-header {
      height: rem(381);
      margin-top: rem(-381);

      .font-size & {
        height: rem(350);
        margin-top: rem(-350);
      }
    }
  }
}