.hero-banner {
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-2);
  text-align: center;
  background-color: rgb(var(--color-dark));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.field--name-field-hero + .field--name-field-paragraphs,
.field--name-field-hero + .page-template__layout {
  margin-top: var(--space-10);
}

.hero-banner__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: 1194px;
}

.hero-banner__heading {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-h1);
  color: rgb(var(--color-white));
  margin: 0;
}

.hero-banner__text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  color: rgb(var(--color-white));
  margin: 0;
  line-height: 150%;
}

@media (min-width: 768px) {
  .hero-banner {
    min-height: 560px;
  }
}

@media (max-width: 767px) {
  .hero-banner {
    padding: var(--space-5) var(--space-2);
  }

  .hero-banner__heading {
    font-size: 40px;
  }
}