.banner,
.banner.compact {
  padding: 80px 15px;
  text-align: center;
}

.banner,
.banner.compact,
.banner.standout,
.banner.narrow {
  background-color: var(--color-info-accent);
}

.banner.standout {
  padding: 48px 0;
}

.banner.cool {
  background: linear-gradient(170.96deg, #bfe4ff -0.25%, #cecef6 104.12%);
  padding: 24px 0;
  margin-top: 0px;
}

.section .banner p {
  margin: 32px 0;
}

.banner h1,
.banner h2,
.banner h3,
.banner h4,
.banner h5,
.banner p {
  text-align: center;
}

.banner > div {
  max-width: var(--block-sm-max-width);
  margin: auto;
  padding: 0;
}

.banner.compact {
  padding: 40px 15px;
}

.banner {
  margin: 0 auto;
  color: var(--color-white);
}

.banner.light {
  color: var(--color-black);
  background-color: var(--color-white);
}

.banner.compact p {
  margin: 24px;
}

.banner.compact p.button-container, .banner.compact .con-button {
  margin-bottom: 0;
}

.banner.compact p.button-container ~ p, .banner.compact .con-button ~ p {
  margin-top: 0;
}

.banner h2,
.banner h3 {
  color: var(--color-white);
}

.banner.standout h2,
.banner.standout h3 {
  color: var(--heading-color);
}

main .banner h2 {
  margin-top: 0;
  margin-bottom: 0;  
  font-size: 28px;
  font-style: normal;
  font-weight: 900;
  line-height: 130%;
}

.banner.light h2,
.banner.light h3 {
  color: var(--color-black);
}

.banner a:any-link {
  color: var(--color-white);
}

.banner.light a:any-link {
  color: var(--color-black);
}

.banner .icon {
  height: 72px;
  width: 72px;
}

.banner.multi-button .button-container, .banner.multi-button .con-button {
  display: inline-block;
}

.banner p:last-of-type {
  margin-bottom: 0;
}

.banner.standout .content-container {
  color: var(--body-color);
}

.banner.standout .content-container > div {
  padding: 33px 28%;
  background-color: var(--body-background-color);
  border-radius: 12px;
}

.banner.standout .content-container em {
  font-style: normal;
  background: linear-gradient(180deg, #FF4DD2 20%, #FF993B 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 900;
}

.banner.cool .wrapper {
  padding: 0 16px;
  max-width: unset;
}

.banner.cool .content-container {
  color: var(--body-color);
  background: linear-gradient(
    95.37deg,
    rgba(255, 255, 255, 0.8) 18.1%,
    rgba(255, 255, 255, 0.4) 93.47%
  );
  padding: 38px 35px 20px;
  border: 2px solid #fff;
  border-radius: 15px;
}

.banner.cool p.button-container {
  margin-top: 16px;
}

.banner.cool p.button-container a.button {
  font-size: 17px;
  padding-left: 1.65em;
  padding-right: 1.65em;
}

.banner.cool h2 {
  color: var(--body-color);
  font-size: 28px;
  font-weight: 900;
  padding: 0 15px;
}

@media (min-width: 900px) {
  .section .banner.standout {
    padding-left: 6%;
    padding-right: 6%;
  }

  .banner.standout .content-container > div {
    padding: 33px 9%;
  }

  .banner {
    padding-left: 56px;
    padding-right: 56px;
  }

  .banner > div {
    max-width: var(--block-md-max-width);
  }

  .banner.narrow > div {
    max-width: 850px;
  }

  .banner.standout .content-container {
    max-width: 830px;
  }
}

@media (min-width: 1200px) {
  .banner > div {
    max-width: var(--block-lg-max-width);
  }

  .banner.standout .content-container {
    max-width: 1024px;
  }
}

@media (min-width: 768px) {
  .banner.cool {
    padding: 40px 0;
  }
  .banner.cool .wrapper {
    padding: 0 32px;
    max-width: unset;
  }
  .banner.cool .content-container {
    padding: 38px 45px 20px;
  }
  .banner.cool h2 {
    padding: 0;
  }
  .banner.cool p.button-container {
    margin-top: 14px;
  }
}

@media (min-width: 1280px) {
  .banner.cool {
    padding: 48px 0;
  }
  .banner.cool .wrapper {
    padding: 0 40px;
    max-width: unset;
  }
  .banner.cool .content-container {
    padding: 70px 45px;
  }
  .banner.cool h2 {
    font-size: 45px;
    font-weight: 900;
  }
  .banner.cool p.button-container {
    margin-top: 21px;
  }
  .banner.cool p.button-container a.button {
    font-size: 19px;
  }
}

@media (min-width: 1680px) {
  .banner.cool .wrapper {
    padding: 0;
    max-width: 1600px;
  }
}