Header Banner Custom Styles

gistfile1.txt

 .page-header {
    background-color: #f3f3f7;
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 375px;
    height: 375px;

    // 600px viewport
    @include breakpoint(m-lg) {
      background-size: auto 600px;
      height: 480px;
      background-position: -400px center;
    }

    // 768px viewport
    @include breakpoint(t-sm) {
      height: 600px;
      background-position: -400px center;
    }

    // 1200px viewport
    @include breakpoint(d-sm) {
      background-position: -200px center;
    }

    // 1350px viewport
    @media (min-width: 1350px) {
      background-position: right center;
    }

    @media screen and (min-width: $desktop-xl) {
      background-size: cover;
      height: 740px;
    }

    .container {
      height: 375px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      // 600px viewport
      @include breakpoint(m-lg) {
        height: 480px;
      }

      // 768px viewport
      @include breakpoint(t-sm) {
        height: 600px;
      }

      // 1600px viewport
      @media screen and (min-width: $desktop-xl) {
        max-width: $desktop-xxl;
        height: 740px;
      }
    }

    .page-header-content {
      max-width: 240px;

      // 480px viewport
      @include breakpoint(m-sm) {
        max-width: 300px;
      }

      // 600px viewport
      @include breakpoint(m-lg) {
        max-width: 400px;
      }

      // 1200px viewport
      @include breakpoint(d-sm) {
        max-width: 540px;
      }

      // 1400px viewport
      @include breakpoint(d-lg) {
        max-width: 600px;
      }

      // 1600px viewport
      @media screen and (min-width: $desktop-xl) {
        max-width: 743px;
      }
    }

    .page-title {
      color: black;
      font-family: $font-stack-secondary;
      font-size: 32px;
      font-style: normal;
      font-weight: 400;
      line-height: 1.2;
      text-shadow: 2px 2px 0 #f3f3f7; // For readability when text is over image is certain areas.

      // 1200px viewport
      @include breakpoint(d-sm) {
        font-size: 40px;
      }

      // 1400px viewport
      @include breakpoint(d-lg) {
        font-size: 50px;
      }

      // 1600px
      @media screen and (min-width: $desktop-xl) {
        font-size: 64px;
      }
    }
    .btn {
      font-size: 16px;

      // 600px viewport
      @include breakpoint(m-lg) {
        font-size: 24px;
      }
    }
  }
}