.hero {
  padding: 0 0 var(--sp--7);
  margin-top: calc(-1 * var(--ly--header-height));
  overflow: hidden;
  position: relative;
}
.layout-builder .hero {
  margin-top: 0;
}
.hero-content {
  background-color: var(--co--primary--high);
  color: var(--co--neutral--lower);
  text-align: center;
  padding: var(--sp--10) 0;
  position: relative;
  overflow: hidden;
}
.hero-content > * {
  position: relative;
}
.hero-content .scribble.v1 {
  position: absolute;
  width: 15.125rem;
  right: -3rem;
  top: -3rem;
  color: var(--co--secondary--medium);
  transform: translate(50%, 0);
}
.hero-content .scribble.v2 {
  position: absolute;
  width: 16.875rem;
  left: 2rem;
  bottom: 1rem;
  color: var(--co--primary--lower);
  transform: translate(-50%, 50%) rotate(8.11deg);
}

.hero .button {
  margin-top: var(--sp--7);
}
.hero em {
  color: var(--co--accent--medium);
  font-style: normal;
}
.hero-title {
  font-family: var(--ff--heading);
  font-weight: 500;
  font-size: var(--fz--heading--x-large);
  line-height: var(--lh--heading--x-large);
  letter-spacing: var(--ls--heading--x-large);
  margin: 0 auto;
  max-width: var(--ly--width--medium);
  padding: 0 var(--sp--2);
}
.hero-media {
  max-width: var(--ly--width--large);
  margin: calc(-1 * var(--sp--7)) auto 0;
  padding: 0 var(--sp--6);
  position: relative;
}
.hero-media .plyr__video-wrapper {
  border-radius: var(--sp--5);
  overflow: hidden;
}
.hero-media .plyr--video .plyr__controls {
  border-radius: 0 0 var(--sp--5) var(--sp--5);
}
.hero .hero-media img,
.hero .hero-media iframe {
  width: 100%;
  border-radius: var(--sp--5);
}
@media (min-width: 52.125rem) {
  .hero-title {
    font-size: var(--fz--display--smaller);
    line-height: var(--lh--display--smaller);
    letter-spacing: var(--ls--display--smaller);
  }
  .hero-content .scribble.v1 {
    width: 18.5rem;
    right: 2rem;
    top: -4rem;
  }
  .hero-content .scribble.v2 {
    left: 7rem;
    bottom: 5rem;
  }
}
@media (min-width: 90rem) {
  .hero-content .scribble.v1 {
    right: 5rem;
  }
  .hero-content .scribble.v2 {
    /* right: 5rem; */
  }
}
