.banner-block {
  display: flex;
  border: 1px solid #d1d5db;
  background-color: #f9fafb;
  background-image: var(--banner-desktop, none);
  align-items: center;
  gap: 0.75rem;
  border-radius: 3px;
  overflow: hidden;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media (max-width: 768px) {
  .banner-block {
    background-image: var(--banner-mobile, var(--banner-desktop, none));
    flex-direction: column;
    gap: unset;
    padding-top: 33%;
    background-position: top center;
    background-size: 100% auto;
  }
}

.banner-block__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
  width: 50%;
  padding: 3.25rem 2.5rem;
  background: #d9d9d9;
  background: linear-gradient(180deg, rgba(225, 240, 255, 0.9) 0%, rgba(214, 232, 250, 0.9) 100%);
}

.banner-block__body h1 {
  margin: -1rem 0 0;
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  letter-spacing: -2%;
}

.banner-block__body h1 strong {
  color: #009fe3;
  font-weight: 600;
}

.banner-block__body p {
  margin: 0;
  font-size: 1.25rem;
}

.banner-block__body div {
  align-self: stretch;
}

.banner-block__body .btn {
  display: inline-flex;
}

@media (max-width: 768px) {
  .banner-block__body {
    width: 100%;
    order: 2;
    padding: 2rem 1.5rem;
    flex: 1 1 100%;
    background: linear-gradient(180deg, rgba(225, 240, 255, 0.9) 0%, rgba(214, 232, 250, 0.9) 100%);
  }

  .banner-block__body div {
    align-self: center;
    margin-top: 0.75rem;
  }

  .banner-block__body .btn {
    justify-content: center;
  }
}

@media (min-width: 768px) {
  .banner-block__body {
    flex: 0 1 50%;
  }
}