section.hero {
  padding-top: var(--header-height);
}
@container main (min-width: 48rem) {
  section.hero {
    min-height: clamp(400px, 50vw, 900px);
  }
}
@container main (max-width: 47.9375rem) {}
section.hero > div {
  height: 100%;
  -ms-flex-line-pack: end;
      align-content: end;
  -webkit-padding-after: calc(var(--block-padding) * 2) !important;
          padding-block-end: calc(var(--block-padding) * 2) !important;
}
@container main (max-width: 47.9375rem) {
  section.hero > div {
    padding-block: 40px !important;
  }
}
section.hero h1 {
  font-size: clamp(1.875rem, 3.5vw, 3.4375rem);
  line-height: 1.7em;
  font-weight: 400 !important;
}
section.hero h1 a {
  text-decoration: none;
  word-wrap: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.7em;
  margin-left: clamp(-26px, -3vw, -16px);
  padding: 0 clamp(15px, 1.5vw, 25px) clamp(5px, 0.65vw, 10px);
  white-space: nowrap;
}
section.hero h1 a.bg-mint {
  --btn-hover-bg-color: transparent;
}
section.hero h1 a.bg-raspberry {
  --btn-hover-bg-color: transparent;
}
section.hero h1 a.bg-grape {
  --btn-hover-bg-color: transparent;
}
section.hero h1 a.bg-orange {
  --btn-hover-bg-color: transparent;
}
section.hero h1 a:hover {
  border-color: transparent !important;
  border: 1px solid var(--black) !important;
}
section.hero h1 a:not([class*=bg]) {
  color: inherit;
}
@container main (min-width: 64.0625rem) {
  section.hero:has(img) h1 {
    font-size: clamp(1.875rem, 2.7vw, 3rem);
  }
}