/* Functions & Mixins */
/* ==== Containers & Responsive Mixins ==== */
/* Defines convenience mixins for common breakpoint targets.
these are small, medium, mediumlarge, and large. These variables should be defined prior to use.
*/
/* Universal breakpoints */
.badged-banner {
  background-color: #f7f7f7;
  padding-bottom: 2rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }
  .badged-banner *, .badged-banner *::before, .badged-banner::after {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  @media screen and (min-width: 48rem) {
    .badged-banner {
      padding-bottom: 0; } }
  .badged-banner__inner {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 100%;
    margin: 0 auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    width: 82.5rem;
    position: relative; }
    @media (min-width: 768px) {
      .badged-banner__inner {
        padding-left: 2.5rem;
        padding-right: 2.5rem; } }
    @media (min-width: 1280px) {
      .badged-banner__inner {
        padding-left: 5rem;
        padding-right: 5rem; } }
    @media (min-width: 768px) {
      .badged-banner__inner {
        width: 85rem; } }
    @media (min-width: 1280px) {
      .badged-banner__inner {
        width: 90rem; } }
    @media screen and (min-width: 48rem) {
      .badged-banner__inner {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        padding-top: 2.5rem;
        padding-bottom: 2.5rem; } }
  .badged-banner__image {
    margin: 0 -1.25rem;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 15rem;
    position: relative; }
    @media screen and (min-width: 48rem) {
      .badged-banner__image {
        max-width: 17.0625rem;
        height: auto;
        background-size: 0%;
        justify-self: end;
        padding: 1.5rem 0;
        margin-right: 2rem; } }
    .badged-banner__image--large {
      display: none; }
      @media screen and (min-width: 48rem) {
        .badged-banner__image--large {
          display: block; } }
  @media screen and (min-width: 48rem) {
    .badged-banner__content {
      margin-left: 2rem; } }
  .badged-banner__badge {
    background-color: #34657f;
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    padding: 0.5rem 1rem 0.25rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    left: 4vw;
    top: 0; }
    @media screen and (min-width: 48rem) {
      .badged-banner__badge {
        left: 0;
        top: -2.5rem; } }
  .badged-banner__card-badge-container {
    position: relative; }
  .badged-banner__card-badge {
    background-color: #34657f;
    font-size: 23px;
    font-size: 1.4375rem;
    line-height: 1;
    font-weight: 700;
    color: #fff;
    padding: 0.5rem 1rem 0.25rem;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    left: -2rem;
    top: -3.2rem; }
  .badged-banner__title {
    margin: 2rem 0 0;
    color: #3b3c43;
    font-weight: 400;
    line-height: 1;
    font-size: 32px;
    font-size: 2rem; }
    @media screen and (min-width: 22.5rem) {
      .badged-banner__title {
        font-size: 34px;
        font-size: 2.125rem; } }
    @media screen and (min-width: 48rem) {
      .badged-banner__title {
        font-size: 40px;
        font-size: 2.5rem;
        margin-top: 0; } }
    @media screen and (min-width: 80rem) {
      .badged-banner__title {
        font-size: 42px;
        font-size: 2.625rem; } }
    @media screen and (min-width: 90rem) {
      .badged-banner__title {
        font-size: 50px;
        font-size: 3.125rem; } }
  .badged-banner__text {
    color: #3b3c43;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.3;
    margin: 0;
    padding: 1.25rem 0; }
    @media screen and (min-width: 30rem) {
      .badged-banner__text {
        font-size: 18px;
        font-size: 1.125rem; } }
    @media screen and (min-width: 48rem) {
      .badged-banner__text {
        font-size: 21px;
        font-size: 1.3125rem; } }
    @media screen and (min-width: 80rem) {
      .badged-banner__text {
        font-size: 24px;
        font-size: 1.5rem;
        padding: 1.5rem 1.5rem 1.5rem 0; } }
  .badged-banner__button {
    border: 0;
    padding: 0.9375rem 1.5625rem;
    background-color: #fbc600;
    color: #3b3c43;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    -webkit-transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out, color 150ms ease-in-out;
    display: inline-block; }
    .badged-banner__button:hover {
      background-color: #3b3c43;
      color: #ffffff; }
    .badged-banner__button:focus, .badged-banner__button:focus-visible {
      outline-color: #3b3c43; }
    .badged-banner__button.-disabled {
      cursor: not-allowed; }
      .badged-banner__button.-disabled:hover {
        background-color: #fbc600;
        color: #3b3c43; }
      .badged-banner__button.-disabled:focus, .badged-banner__button.-disabled:focus-visible {
        outline: none; }