.paragraph--type--hero {
  --paragraph-hero-position: initial;
  --paragraph-hero-display: block;
  --paragraph-hero-flex-flow: initial;
  --paragraph-hero-max-width: initial;
  --paragraph-hero-min-height: initial;
  --paragraph-hero-margin: initial;
  --paragraph-hero-padding: initial;
  --paragraph-hero-overflow: initial;
  --paragraph-hero-background: initial;
  --paragraph-hero-border-radius: 0;

  position: var(--paragraph-hero-position);
  display: var(--paragraph-hero-display);
  flex-flow: var(--paragraph-hero-flex-flow);
  max-width: var(--paragraph-hero-max-width);
  min-height: var(--paragraph-hero-min-height);
  margin: var(--paragraph-hero-margin);
  padding: var(--paragraph-hero-padding);
  overflow: var(--paragraph-hero-overflow);
  background: var(--paragraph-hero-background);
  border-radius: var(--paragraph-hero-border-radius);
}

.hero {
  --hero-display: block;
  --hero-position: relative;
  --hero-flex-flow: unset;
  --hero-align-items: initial;
  --hero-justify-content: initial;
  --hero-width: 100%;
  --hero-max-width: inherit;
  --hero-height: initial;
  --hero-min-height: initial;
  --hero-margin: initial;
  --hero-padding: initial;
  --hero-overflow: hidden;
  --hero-border-radius: initial;
  --hero-background: transparent;
  --hero-color: initial;

  display: var(--hero-display);
  position: var(--hero-position);
  flex-flow: var(--hero-flex-flow);
  align-items: var(--hero-align-items);
  justify-content: var(--hero-justify-content);
  width: var(--hero-width);
  max-width: var(--hero-max-width);
  height: var(--hero-height);
  min-height: var(--hero-min-height);
  margin: var(--hero-margin);
  padding: var(--hero-padding);
  overflow: var(--hero-overflow);
  border-radius: var(--hero-border-radius);
  background: var(--hero-background);
  color: var(--hero-color);
}

.hero::after {
  --hero-after-content: none;
  --hero-after-position: absolute;
  --hero-after-z-index: 2;
  --hero-after-top: 0;
  --hero-after-right: 0;
  --hero-after-bottom: 0;
  --hero-after-left: 0;
  --hero-after-width: initial;
  --hero-after-height: initial;
  --hero-after-margin: auto;
  --hero-after-background: none;
  --hero-after-mix-blend-mode: unset;

  content: var(--hero-after-content);
  position: var(--hero-after-position);
  z-index: var(--hero-after-z-index);
  top: var(--hero-after-top);
  right: var(--hero-after-right);
  bottom: var(--hero-after-bottom);
  left: var(--hero-after-left);
  margin: var(--hero-after-margin);
  width: var(--hero-after-width);
  height: var(--hero-after-height);
  background: var(--hero-after-background);
  mix-blend-mode: var(--hero-after-mix-blend-mode);
}

.hero__image-container {
  --hero-image-container-width: 100%;
  --hero-image-container-min-height: initial;
  --hero-image-container-padding: initial;
  --hero-image-container-overflow: initial;

  position: relative;
  width: var(--hero-image-container-width);
  min-height: var(--hero-image-container-min-height);
  padding: var(--hero-image-container-padding);
  overflow: var(--hero-image-container-overflow);
}

.hero .field--name-field-hero-media {
  --field-hero-video-display: block;
  --field-hero-video-position: relative;
  --field-hero-video-top: 0;
  --field-hero-video-right: 0;
  --field-hero-video-bottom: 0;
  --field-hero-video-left: 0;
  --field-hero-video-order: unset;
  --field-hero-video-overflow: initial;
  --field-hero-video-border-radius: initial;
  --field-hero-video-box-shadow: initial;

  display: var(--field-hero-video-display);
  position: var(--field-hero-video-position);
  top: var(--field-hero-video-top);
  right: var(--field-hero-video-right);
  bottom: var(--field-hero-video-bottom);
  left: var(--field-hero-video-left);
  order: var(--field-hero-video-order);
  overflow: var(--field-hero-video-overflow);
  border-radius: var(--field-hero-video-border-radius);
  box-shadow: var(--field-hero-video-box-shadow);

  @media (min-width: 1024px) {
    --field-hero-video-position: absolute;
  }
}

.hero video {
  --hero-video-object-position: center;

  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-video-object-position);
}

.field--name-field-hero-image {
  --field-hero-image-display: block;
  --field-hero-image-position: absolute;
  --field-hero-image-z-index: 1;
  --field-hero-image-top: 0;
  --field-hero-image-right: 0;
  --field-hero-image-bottom: 0;
  --field-hero-image-left: 0;
  --field-hero-image-width: 100%;
  --field-hero-image-height: initial;
  --field-hero-image-min-height: initial;
  --field-hero-image-margin: initial;
  --field-hero-image-order: unset;
  --field-hero-image-overflow: initial;
  --field-hero-image-border-radius: initial;
  --field-hero-image-box-shadow: initial;

  display: var(--field-hero-image-display);
  position: var(--field-hero-image-position);
  z-index: var(--field-hero-image-z-index);
  top: var(--field-hero-image-top);
  right: var(--field-hero-image-right);
  bottom: var(--field-hero-image-bottom);
  left: var(--field-hero-image-left);
  width: var(--field-hero-image-width);
  height: var(--field-hero-image-height);
  min-height: var(--field-hero-image-min-height);
  margin: var(--field-hero-image-margin);
  order: var(--field-hero-image-order);
  overflow: var(--field-hero-image-overflow);
  border-radius: var(--field-hero-image-border-radius);
  box-shadow: var(--field-hero-image-box-shadow);
}

.field--name-field-hero-image::after,
.field--name-field-hero-image::before {
  --field-hero-image-pseudo-content: '';
  --field-hero-image-pseudo-display: block;
  --field-hero-image-pseudo-position: absolute;
  --field-hero-image-pseudo-z-index: 1;
  --field-hero-image-pseudo-top: unset;
  --field-hero-image-pseudo-right: unset;
  --field-hero-image-pseudo-bottom: unset;
  --field-hero-image-pseudo-left: unset;
  --field-hero-image-pseudo-width: initial;
  --field-hero-image-pseudo-height: initial;
  --field-hero-image-pseudo-transform: unset;
  --field-hero-image-pseudo-background: none;

  content: var(--field-hero-image-pseudo-content);
  display: var(--field-hero-image-pseudo-display);
  position: var(--field-hero-image-pseudo-position);
  z-index: var(--field-hero-image-pseudo-z-index);
  top: var(--field-hero-image-pseudo-top);
  right: var(--field-hero-image-pseudo-right);
  bottom: var(--field-hero-image-pseudo-bottom);
  left: var(--field-hero-image-pseudo-left);
  width: var(--field-hero-image-pseudo-width);
  height: var(--field-hero-image-pseudo-height);
  transform: var(--field-hero-image-pseudo-transform);
  background: var(--field-hero-image-pseudo-background);
}

.field--name-field-hero-image img {
  --hero-image-display: block;
  --hero-image-position: absolute;
  --hero-image-top: 0;
  --hero-image-right: unset;
  --hero-image-bottom: unset;
  --hero-image-left: unset;
  --hero-image-order: unset;
  --hero-image-width: 100%;
  --hero-image-max-width: none;
  --hero-image-height: 100%;
  --hero-image-max-height: initial;
  --hero-image-margin: initial;
  --hero-image-float: initial;
  --hero-image-object-fit: cover;
  --hero-image-object-position: center;
  --hero-image-border: initial;
  --hero-image-border-radius: 0;

  display: var(--hero-image-display);
  position: var(--hero-image-position);
  top: var(--hero-image-top);
  right: var(--hero-image-right);
  bottom: var(--hero-image-bottom);
  left: var(--hero-image-left);
  order: var(--hero-image-order);
  width: var(--hero-image-width);
  max-width: var(--hero-image-max-width);
  height: var(--hero-image-height);
  max-height: var(--hero-image-max-height);
  margin: var(--hero-image-margin);
  float: var(--hero-image-float);
  object-fit: var(--hero-image-object-fit);
  object-position: var(--hero-image-object-position);
  border: var(--hero-image-border);
  border-radius: var(--hero-image-border-radius);
}

.hero__overlay {
  --hero-overlay-position: unset;
  --hero-overlay-display: block;
  --hero-overlay-top: unset;
  --hero-overlay-right: unset;
  --hero-overlay-bottom: unset;
  --hero-overlay-left: unset;
  --hero-overlay-z-index: unset;
  --hero-overlay-width: initial;
  --hero-overlay-height: initial;
  --hero-overlay-transform: initial;
  --hero-overlay-background: transparent;

  position: var(--hero-overlay-position);
  display: var(--hero-overlay-display);
  top: var(--hero-overlay-top);
  right: var(--hero-overlay-right);
  bottom: var(--hero-overlay-bottom);
  left: var(--hero-overlay-left);
  z-index: var(--hero-overlay-z-index);
  width: var(--hero-overlay-width);
  height: var(--hero-overlay-height);
  transform: var(--hero-overlay-transform);
  background: var(--hero-overlay-background);
}

.hero .hero__container {
  --hero-container-display: block;
  --hero-container-position: relative;
  --hero-container-flex: initial;
  --hero-container-flex-flow: initial;
  --hero-container-align-items: initial;
  --hero-container-justify-content: initial;
  --hero-container-z-index: 1;
  --hero-container-top: 10%;
  --hero-container-left: 10%;
  --hero-container-width: 80vw;
  --hero-container-max-width: 1080px;
  --hero-container-height: initial;
  --hero-container-margin: 20px 0;
  --hero-container-padding: 20px;
  --hero-container-background: rgb(255 255 255 / 0.9);

  display: var(--hero-container-display);
  position: var(--hero-container-position);
  flex: var(--hero-container-flex);
  flex-flow: var(--hero-container-flex-flow);
  align-items: var(--hero-container-align-items);
  justify-content: var(--hero-container-justify-content);
  z-index: var(--hero-container-z-index);
  top: var(--hero-container-top);
  left: var(--hero-container-left);
  width: var(--hero-container-width);
  max-width: var(--hero-container-max-width);
  height: var(--hero-container-height);
  margin: var(--hero-container-margin);
  padding: var(--hero-container-padding);
  background: var(--hero-container-background);
}

@media screen and (min-width: 768px) {
  .hero .hero__container {
    --hero-container-padding: 40px 40px 42px;
  }
}

@media screen and (min-width: 1024px) {
  .hero .hero__container {
    --hero-container-left: 15%;
    --hero-container-width: 40vw;
    --hero-container-margin: 60px 0;
  }
}

@media screen and (min-width: 1440px) {
  .hero .hero__container {
    --hero-container-margin: 80px 0;
  }
}

.hero__bg-container {
  --hero-bg-container-position: unset;
  --hero-bg-container-width: initial;
  --hero-bg-container-min-height: initial;
  --hero-bg-container-padding: initial;
  --hero-bg-container-overflow: initial;

  position: var(--hero-bg-container-position);
  width: var(--hero-bg-container-width);
  min-height: var(--hero-bg-container-min-height);
  padding: var(--hero-bg-container-padding);
  overflow: var(--hero-bg-container-overflow);
}

.hero__image-bg {
  --hero-bg-margin: initial;

  margin: var(--hero-bg-margin);
}

.hero__image-bg img {
  --hero-bg-img-position: absolute;
  --hero-bg-img-top: 0;
  --hero-bg-img-width: 100%;
  --hero-bg-img-max-width: none;
  --hero-bg-img-height: 100%;
  --hero-bg-img-object-fit: cover;
  --hero-bg-img-filter: blur(10px);
  --hero-bg-img-transform: scale(1.2);

  position: var(--hero-bg-img-position);
  top: var(--hero-bg-img-top);
  width: var(--hero-bg-img-width);
  max-width: var(--hero-bg-img-max-width);
  height: var(--hero-bg-img-height);
  object-fit: var(--hero-bg-img-object-fit);
  filter: var(--hero-bg-img-filter);
  transform: var(--hero-bg-img-transform);
}

.hero__text-container {
  --hero-text-container-position: initial;
  --hero-text-container-display: block;
  --hero-text-container-flex-flow: column;
  --hero-text-container-justify-content: initial;
  --hero-text-container-gap: initial;
  --hero-text-container-z-index: initial;
  --hero-text-container-top: unset;
  --hero-text-container-right: unset;
  --hero-text-container-bottom: unset;
  --hero-text-container-left: unset;
  --hero-text-container-width: inherit;
  --hero-text-container-max-width: initial;
  --hero-text-container-height: initial;
  --hero-text-container-margin: initial;
  --hero-text-container-padding: initial;
  --hero-text-container-border-radius: initial;
  --hero-text-container-background: none;
  --hero-text-container-background-repeat: no-repeat;
  --hero-text-container-background-position: center;
  --hero-text-container-background-size: 100%;
  --hero-text-container-color: var(--base-black);
  --hero-text-container-font-size: initial;
  --hero-text-heading-font-size: 40px;
  --hero-text-description-font-size: 20px;
  --hero-text-container-font-family: var(--font-primary);
  --hero-text-container-font-weight: var(--font-weight-regular);
  --hero-text-container-line-height: initial;

  display: var(--hero-text-container-display);
  position: var(--hero-text-container-position);
  flex-flow: var(--hero-text-container-flex-flow);
  justify-content: var(--hero-text-container-justify-content);
  gap: var(--hero-text-container-gap);
  z-index: var(--hero-text-container-z-index);
  top: var(--hero-text-container-top);
  right: var(--hero-text-container-right);
  bottom: var(--hero-text-container-bottom);
  left: var(--hero-text-container-left);
  width: var(--hero-text-container-width);
  max-width: var(--hero-text-container-max-width);
  height: var(--hero-text-container-height);
  margin: var(--hero-text-container-margin);
  padding: var(--hero-text-container-padding);
  border-radius: var(--hero-text-container-border-radius);
  background: var(--hero-text-container-background);
  background-repeat: var(--hero-text-container-background-repeat);
  background-position: var(--hero-text-container-background-position);
  background-size: var(--hero-text-container-background-size);
  color: var(--hero-text-container-color);
  font-size: var(--hero-text-container-font-size);
  font-family: var(--hero-text-container-font-family);
  font-weight: var(--hero-text-container-font-weight);
  line-height: var(--hero-text-container-line-height);
}

@media screen and (max-width: 767px) {
  .hero__text-container {
    --hero-text-container-padding: 13px 0 0;
  }
}

.hero__title {
  --hero-title-display: initial;
  --hero-title-max-width: 100%;
  --hero-title-margin: initial;
  --hero-title-padding: initial;
  --hero-title-color: inherit;
  --hero-title-font-family: inherit;
  --hero-title-font-size: 34px;
  --hero-title-font-weight: var(--font-weight-bold);
  --hero-title-letter-spacing: normal;
  --hero-title-line-height: 39.84px;
  --hero-title-text-transform: initial;

  display: var(--hero-title-display);
  max-width: var(--hero-title-max-width);
  margin: var(--hero-title-margin);
  padding: var(--hero-title-padding);
  color: var(--hero-title-color);
  font-family: var(--hero-title-font-family);
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
  letter-spacing: var(--hero-title-letter-spacing);
  line-height: var(--hero-title-line-height);
  text-transform: var(--hero-title-text-transform);
}

@media screen and (min-width: 768px) {
  .hero__title {
    --hero-font-size: 38px;
    --hero-line-height: 44.53px;
  }
}

@media screen and (min-width: 1160px) {
  .hero__title {
    --hero-font-size: 48px;
    --hero-line-height: 56.25px;
  }
}

.hero__title span {
  --hero-span-color: initial;
  --hero-span-font-style: normal;
  --hero-span-font-weight: inherit;

  color: var(--hero-span-color);
  font-style: var(--hero-span-font-style);
  font-weight: var(--hero-span-font-weight);
}

.hero__subtitle {
  --hero-subtitle-display: initial;
  --hero-subtitle-max-width: initial;
  --hero-subtitle-margin: initial;
  --hero-subtitle-padding: initial;
  --hero-subtitle-color: initial;
  --hero-subtitle-font-size: 34px;
  --hero-subtitle-font-style: italic;
  --hero-subtitle-font-weight: var(--font-weigh-bold);
  --hero-subtitle-letter-spacing: normal;
  --hero-subtitle-line-height: 39.84;
  --hero-subtitle-text-transform: initial;

  display: var(--hero-subtitle-display);
  max-width: var(--hero-subtitle-max-width);
  margin: var(--hero-subtitle-margin);
  padding: var(--hero-subtitle-padding);
  color: var(--hero-subtitle-color);
  font-size: var(--hero-subtitle-font-size);
  font-style: var(--hero-subtitle-font-style);
  font-weight: var(--hero-subtitle-font-weight);
  letter-spacing: var(--hero-subtitle-letter-spacing);
  line-height: var(--hero-subtitle-line-height);
  text-transform: var(--hero-subtitle-text-transform);
}

@media screen and (min-width: 768px) {
  .hero__subtitle {
    --hero-subtitle-font-size: 38px;
    --hero-subtitle-line-height: 44.53;
  }
}

@media screen and (min-width: 1160px) {
  .hero__subtitle {
    --hero-subtitle-font-size: 38px;
    --hero-subtitle-line-height: 56.25;
  }
}

.hero__pattern {
  --hero-pattern-display: block;
  /* @todo Where is this variable used? */
  --hero-pattern-margin: initial;

  display: var(--hero-pattern-display);
}

.hero__pattern::after {
  --hero-pattern-after-content: none;
  --hero-pattern-after-display: block;
  --hero-pattern-after-width: initial;
  --hero-pattern-after-height: initial;
  --hero-pattern-after-margin: initial;
  --hero-pattern-after-background: none;
  --hero-pattern-after-background-repeat: unset;
  --hero-pattern-after-background-size: initial;

  content: var(--hero-pattern-after-content);
  display: var(--hero-pattern-after-display);
  width: var(--hero-pattern-after-width);
  height: var(--hero-pattern-after-height);
  margin: var(--hero-pattern-after-margin);
  background: var(--hero-pattern-after-background);
  background-repeat: var(--hero-pattern-after-background-repeat);
  background-size: var(--hero-pattern-after-background-size);
}

.hero__description {
  --hero-description-max-width: inherit;
  --hero-description-margin: 1rem 0 0;
  --hero-description-color: inherit;
  --hero-description-font-size: 20px;
  --hero-description-font-family: inherit;
  --hero-description-font-weight: var(--font-weight-medium);
  --hero-description-line-height: 23.49px;

  max-width: var(--hero-description-max-width);
  margin: var(--hero-description-margin);
  color: var(--hero-description-color);
  font-size: var(--hero-description-font-size);
  font-family: var(--hero-description-font-family);
  font-weight: var(--hero-description-font-weight);
  line-height: var(--hero-description-line-height);
}

@media screen and (min-width: 768px) {
  .hero__description {
    --hero-description-font-size: 26px;
    --hero-description-line-height: 30.47px;
  }
}

@media screen and (min-width: 1160px) {
  .hero__description {
    --hero-description-font-size: 24px;
    --hero-description-line-height: 28.13px;
  }
}

.hero__description p {
  --hero-p-margin: 0 0 1rem;
  --hero-p-padding: 0;
  --hero-p-background: transparent;
  --hero-p-color: inherit;
  --hero-p-line-height: var(--hero-description-line-height);

  margin: var(--hero-p-margin);
  padding: var(--hero-p-padding);
  background: var(--hero-p-background);
  color: var(--hero-p-color);
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: var(--hero-p-line-height);
}

.button.hero__button {
  --button-border-radius: 8px;
  --button-color: var(--secondary-color);
  --button-font-family: inherit;
  --button-font-size: 17px;
  --button-font-weight: var(--font-weight-bold);
}

.button.hero__button:hover,
.button.hero__button:focus-visible,
.button.hero__button:active {
  --button-color: var(--base-white);
}