/** At this monitor size it is wider than Figma */
.banner {
  position: relative;
  background-color: var(--kale);
  color: var(--white);
  margin-bottom: 4.375rem;
}
@media (min-width: 50.001rem) {
.banner {
    margin-bottom: 0;
}
  }
.banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: -50px;
    width: 50%;
    background-image: url('./assets/banner-bg--mobile.svg');
    background-size: auto 100%;
    background-position: right bottom;
    background-repeat: no-repeat;
    z-index: 1;
  }
@media (min-width: 50.001rem) {
.banner::before {
      background-image: url('./assets/banner-bg.svg');
      bottom: -100px;
  }
    }
.banner__inner {
  position: relative;
  z-index: 1;
  padding: 5rem 0;
}
@media (min-width: 50.001rem) {
.banner__inner {
    padding: 10rem 0;
}
  }
.banner__title {
  position: relative;
  z-index: 1;
  color: var(--white);
  margin-top: 6.25rem;
}
@media (min-width: 50.001rem) {
.banner__title {
    margin-top: 0;
}
  }
.banner--highlight {
  --banner-height: 500px;
  --banner-width: 100%;
}
.banner--highlight .banner__image {
    position: relative;
    z-index: 1;
    width: var(--banner-width);
    height: var(--banner-height);
    overflow: hidden;
    background-color: var(--black);
  }
.banner--highlight .banner__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center;
         object-position: center;
    }
.banner--highlight .banner__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2.5rem;
    gap: 2.5rem;
  }
@media (min-width: 50.001rem) {
.banner--highlight .banner__inner {
      grid-template-columns: 3fr 1fr;
      gap: 8rem;
  }
    }
.banner--highlight .banner__title {
    color: var(--heading-color);
    font-weight: 500;
    font-size: 2.625rem;
    margin-bottom: 1.5625rem;
  }
.banner--highlight .banner__logo img {
      margin: 0 auto;
    }
@media (min-width: 50.001rem) {
.banner--highlight .banner__content {
      padding-right: 0;
      padding-left: 40%;
  }
    }
.banner--message {
  --banner-height: 500px;
  --banner-width: 100%;
  --body-color: var(--kale);

  position: relative;
}
.banner--message .banner__inner {
    padding: 100px 0;
  }
@media (min-width: 50.001rem) {
.banner--message .banner__inner {
      padding: 115px 0;
  }
    }
.banner--message .banner__title {
    color: var(--kale);
    font-weight: 500;
    font-size: 46px;
  }
.banner--message .banner__image {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
  }
.banner--message .banner__image img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      -o-object-position: center;
         object-position: center;
    }
.banner--message .banner__content {
    max-width: 640px;
    position: relative;
    z-index: 1;
    background-color: var(--onion);
    padding:  50px 70px 50px 60px;
    margin: 0 auto;
  }