.hero.layout-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  justify-content: center;
  align-items: center;
  gap: 3.5rem;
}
@media screen and (width >= 60rem) {
  .hero.layout-2 {
    background: url("_images/hero-bg-layout-2.png") no-repeat top center;
    background-size: cover;
  }
}
.hero--left {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.938rem;
}
@media screen and (width >= 60rem) {
  .hero--left {
    max-width: 40rem;
  }
}
.hero.no-image .hero--left, .hero.layout-2 .hero--left {
  text-align: center;
  align-items: center;
}
@media screen and (width < 48rem) {
  .hero.no-image .hero--left, .hero.layout-2 .hero--left {
    padding-inline: var(--wrapper-padding);
  }
}
@media screen and (width >= 60rem) {
  .hero.no-image .hero--left, .hero.layout-2 .hero--left {
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
  }
}
@media screen and (width >= 60rem) {
  .hero--content {
    max-width: 608px;
  }
}
.hero--image {
  max-width: 100%;
}
@media screen and (width >= 60rem) {
  .hero--image {
    max-width: 39.813rem;
  }
}
.hero--video {
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 0.5rem;
}
.hero--eyebrow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
@media screen and (width >= 60rem) {
  .hero--eyebrow {
    margin-bottom: 0.5rem;
  }
}
.hero--title {
  line-height: 1;
}
.hero--title span {
  position: relative;
  display: inline-block;
}
.hero--title span::after {
  content: "";
  position: absolute;
  bottom: -18%;
  left: 0;
  width: 100%;
  height: 65%;
  background: url(_images/underline.png) no-repeat bottom right;
  background-size: 100% 100%;
  z-index: -1;
}
.hero--image {
  position: relative;
}
.hero--img {
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}
@media screen and (width >= 48rem) {
  .hero--img {
    border-radius: 0.75rem;
  }
}
.hero .parallax-in-frame {
  border-radius: 8px;
}
@media screen and (width >= 48rem) {
  .hero .parallax-in-frame {
    border-radius: 0.75rem;
  }
}
.hero .parallax-in-frame .parallax-item {
  border-radius: 0;
}
.hero--card {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 60%;
}
@media screen and (width < 48rem) {
  .hero--card {
    max-height: 200px;
    width: auto;
  }
}
.hero--card.has-shadow {
  border-radius: 0.375rem;
  overflow: hidden;
  box-shadow: 12px 12px 32px 0px rgba(0, 0, 0, 0.15);
}
.hero--buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.875rem;
  margin-top: 0.938rem;
  align-items: center;
}
.hero--image-layout-2 {
  margin-top: clamp(2.3125rem, -4.2431rem + 13.6574vw, 6rem);
}
@media screen and (width < 48rem) {
  .hero--image-layout-2 {
    padding-inline: var(--wrapper-padding);
  }
}
.hero--image-layout-2 > * {
  width: 100%;
}