.page-header {

  &.page-header-light {
    border-bottom: none !important;
    background-color: transparent !important;

    .page-header-title, .page-header-subtitle {
      color: mix($white, $black, 25%);
    }
  }

  &.page-header-dark {
    background-color: #0061f2 !important;
    background-image: linear-gradient(135deg, $orange 0%, $blue 100%) !important;
    color: white !important;

    .page-header-title {
      font-size: 2.25rem !important;

      h1 {
        font-size: inherit !important;
        margin-bottom: 0;
      }
    }

    .page-header-subtitle {
      color: mix($white, $black, 85%);
    }
  }

  &.page-header-compact {
    .page-header-title {
      font-size: 1rem !important;

      h1 {
        font-size: inherit;
        margin-bottom: 0;
      }
    }
  }

}