/// Usage: class="jumbotron mmui-jumbotron" OR class="jumbotron-fluid mmui-jumbotron"
.mmui-jumbotron {
  padding: 6rem 0 6rem 0;
  margin-bottom: 60px;
  min-height: 420px;
  background-size: cover;
  & h1 {
    margin-bottom: 30px;
  }
  //last p in hero use class mmui-mb-3 (or other specified) to give margin bottom
  a {
    color: $mm-neutral-black;
    text-decoration: underline;
    &.mmui-link-button {
      text-decoration: none;
    }
  }

  .mmui-jumbotron-card {
    width: 75%;
    margin: 0 auto;

    .card-link {
      color: $mm-core-digital-blue-70;
      text-decoration: none;
    }
  }
}

.mmui-jumbotron-dark {
  & h1 {
    color: $mm-neutral-white;
  }
  .mmui-hero-body {
    color: $mm-neutral-white;
  }
  a {
    color: $mm-neutral-white;
    text-decoration: underline;
    &.mmui-link-button {
      text-decoration: none;
    }
    &:visited {
      color: $mm-neutral-white;
    }
    &:hover {
      color: $mm-neutral-gray-30;
    }
  }
}

@include media-breakpoint-down(md) {
  .mmui-jumbotron {
    height: auto;

    .mmui-jumbotron-card {
      width: auto;
    }
  }
}