.section-hero {
  position: relative;
  overflow: hidden;
}
.section-hero .section-hero--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  z-index: 10;
  height: 500px;
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--overlay {
    height: auto;
    align-items: center;
    position: relative;
    padding: var(--xl) var(--md);
  }
}
.section-hero .section-hero--overlay .section-hero--overlay-inner {
  display: flex;
  margin-bottom: var(--x24);
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--overlay .section-hero--overlay-inner {
    margin-bottom: 0;
  }
}
.section-hero .section-hero--overlay .section-hero--overlay-inner .section-container--inner {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  width: 100%;
  margin-top: auto;
  gap: var(--sm);
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--overlay .section-hero--overlay-inner .section-container--inner {
    gap: var(--md);
    max-width: unset;
  }
}
.section-hero .section-hero--overlay .section-hero--overlay-inner .section-hero--actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg);
}
@media screen and (width < 640px) {
  .section-hero .section-hero--overlay .section-hero--overlay-inner .section-hero--actions {
    gap: var(--sm);
  }
}
@media screen and (width < 640px) {
  .section-hero .section-hero--overlay .section-hero--overlay-inner .section-hero--actions .button {
    width: 100%;
  }
}
.section-hero .h2 {
  color: var(--Primary-Dark-Foreground);
  font-weight: 500;
}
@media screen and (width < 1024px) {
  .section-hero .h2 {
    margin-bottom: 0;
  }
}
.section-hero .text {
  color: var(--Neutral-Dark-Foreground);
  font-weight: var(--font-weight-bold);
  line-height: 28px !important;
}
@media screen and (width < 1024px) {
  .section-hero .text p {
    margin: 0;
  }
}
.section-hero .section-hero--image {
  height: 500px;
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--image {
    height: auto;
    position: absolute;
    top: 0;
    z-index: 1;
    inset: 0;
  }
}
.section-hero .section-hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(270deg, rgba(0, 63, 57, 0) 33%, rgba(0, 63, 57, 0.7) 70%, rgba(0, 63, 57, 0.8) 100%);
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--image > div {
    height: 100%;
  }
}
.section-hero .section-hero--image img {
  height: auto;
}
@media screen and (width < 1024px) {
  .section-hero .section-hero--image img {
    height: 100%;
  }
}