startbootstrap/_sass/_masthead.scss

.masthead {
  padding: 3rem 0 7rem;
  position: relative;
  background-color: $primary;
  background-image: url('/assets/img/overlay.svg'), linear-gradient(45deg, $primary 0%, #{darken($primary, 5%)} 100%);
  background-size: cover;
  z-index: 0;
  svg.wave {
    position: absolute;
    bottom: -1px;
    left: 0;
  }
  h1 {
    color: white;
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.1;
    z-index: 1;
  }
  h2 {
    color: fade-out($white, 0.4);
    font-weight: 600;
    z-index: 1;
    font-size: 1.2rem;
  }
  a {
    color: fade-out($white, 0.2);
    text-decoration: underline;
    z-index: 1;
    &:hover {
      color: $white;
    }
    &:active {
      text-decoration: none;
    }
  }
  @include media-breakpoint-up(lg) {
    h1 {
      font-size: 3rem;
    }
    h2 {
      font-size: 1.5rem;
    }
  }
  .masthead-cards {
    position: relative;
    z-index: 1;
    .shape {
      position: absolute;
      height: 100%;
      width: 100%;
      background-color: fade-out($white, 0.7);
      top: 0;
      left: 0;
      z-index: -1;
      border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    .card {
      opacity: 1;
      font-size: 0.8rem;
      text-transform: uppercase;
      font-weight: 800;
      letter-spacing: 0.05rem;
      color: $gray-900;
      transition: 0.15s all;
      &:hover {
        margin-top: -0.25rem;
        margin-bottom: 0.25rem;
      }
      &:active {
        margin-top: inherit;
        margin-bottom: inherit;
      }
      &.border-bottom-blue {
        &:hover {
          color: $blue;
        }
      }
      &.border-bottom-green {
        &:hover {
          color: $green;
        }
      }
      &.border-bottom-red {
        &:hover {
          color: $red;
        }
      }
      &.border-bottom-yellow {
        &:hover {
          color: $yellow;
        }
      }
    }
  }
}

.masthead-page {
  padding: 1rem 0 4rem;
  @include media-breakpoint-up(lg) {
    h1 {
      font-size: 2.5rem;
    }
  }
}

@include media-breakpoint-up(lg) {
  .shadow-lg.shadow-hover:hover {
    box-shadow: $box-shadow-lg-hover !important;
  }
  .shadow-lg.shadow-hover:active {
    box-shadow: $box-shadow-lg;
  }
}