.section-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  --overflow-gap: var(--space-md);
  --overflow-padding: calc(var(--gradient-blur) * 2);
  margin-top: calc(-1 * var(--header-height));
}

.hs-inline-edit .section-hero {
  margin-top: 0!important;
}

.section-hero--background-video .section-hero__background {
  background-color: #000;
}

.section-hero--background-color-dark .section-hero__background {
  background-color: var(--cf-color-dark-purple);
}

.section-hero--background-color-light .section-hero__background {
  background-color: var(--cf-color-light-grey);
}

.section-hero--background-color-white .section-hero__background {
  background-color: var(--cf-color-white);
}

.section-hero--background-color-dark,
.section-hero--background-image,
.section-hero--background-video {
  color: var(--cf-color-white);
}

.section-hero--background-color-light,
.section-hero--background-color-white {
  color: var(--cf-color-dark-purple);
}

.section-hero--overflow {
  padding-bottom: calc(var(--overflow-gap) + var(--overflow-padding));
}

.section-hero--overflow-dark {
  background-color: var(--cf-color-dark-purple);
}

.section-hero--overflow-light {
  background-color: var(--cf-color-light-grey);
}

.section-hero--overflow-white {
  background-color: var(--cf-color-white);
}

.section-hero--background-image,
.section-hero--background-video {
  min-height: 75vh;
}

.section-hero__background,
.section-hero__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.section-hero--overflow .section-hero__background {
  height: calc(100% - var(--overflow-gap) - var(--overflow-padding));
}

.section-hero__background .vimeo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  min-width: 100%;
  min-height: 100%;
}

.section-hero__background img,
.section-hero__background iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-hero__overlay {
  background: rgba(0, 0, 0, 0.5);
}

.section-hero__inner {
  position: relative;
  width: 100%;
  padding: var(--space-md) var(--margin);
}

.section-hero__row {
  max-width: var(--container-lg);
  margin: 0 auto;
}

.section-hero__text {
  max-width: 60rem;
}

.section-hero__kicker,
.section-hero__title,
.section-hero__introductory,
.section-hero__paragraph {
  color: inherit;
  margin: 0;
}

.section-hero__kicker {
  margin: 0 0 var(--space-xs);
  padding-bottom: 0.5em;
}

.section-hero--background-color .section-hero__kicker {
  color: var(--cf-color-purple);
}

.section-hero__title {
  margin: 0 0 var(--space-xs) -0.05em;
}

.section-hero__introductory {
  margin: var(--space-xs) 0 0;
  width: 80%;
}

.section-hero__paragraph {
  margin: var(--space-xs) 0 0;
}

.section-hero__actions {
  padding-top: 0.5em;
  margin: var(--space-xs) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
  
.section-hero--overflow .section-hero__images {
  margin-bottom: calc(-1 * (var(--overflow-gap) + var(--space-md)));
}

.section-hero__image {
  position: relative;
  margin: 0 auto;
  max-width: 768px;
}

.section-hero--image.section-hero--screenshot .section-hero__image {
  width: calc(100% - var(--margin));
}

.section-hero--image.section-hero--screenshot .section-hero__image--image {
  margin-left: auto;
  margin-right: 0;
}

.section-hero--image.section-hero--screenshot .section-hero__image--screenshot {
  margin-top: -20%;
  margin-left: 0;
  margin-right: auto;
}

.section-hero__image--screenshot::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--gradient-blur));
  height: calc(100% - var(--gradient-blur));
  background: linear-gradient(-20deg, #0e38fc, #eea88e 50%, #79dbf1);
  opacity: 0.5;
  filter: blur(var(--gradient-blur));
  border-radius: var(--gradient-blur);
}

.section-hero__image img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 599px) {
  .section-hero__text {
    text-align: center;
    margin: 0 auto;
  }
  
  .section-hero__title,
  .section-hero__introductory,
  .section-hero__paragraph {
    margin-left: auto;
    margin-right: auto;
  }
  
  .section-hero__actions {
    justify-content: center;
  }
  
  .section-hero__actions > * {
    width: 100%;
  }
}

@media screen and (min-width: 600px) {
  .section-hero__overlay {
    background: linear-gradient(15deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 100%);
  }
}

@media screen and (max-width: 1399px) {
  .section-hero__title br {
    display: none;
  }

  .section-hero__images {
    margin-top: var(--space-md);
  }
}

@media screen and (min-width: 1400px) {
  .section-hero--image .section-hero__row,
  .section-hero--screenshot .section-hero__row {
    display: grid;
    grid-gap: var(--margin);
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  
  .section-hero--overflow.section-hero--image .section-hero__row,
  .section-hero--overflow.section-hero--screenshot .section-hero__row {
    align-items: end;
  }
  
  .section-hero__inner {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }
  
  .section-hero--background-image .section-hero__inner,
  .section-hero--background-video .section-hero__inner {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-md);
  }
  
  .section-hero--overflow .section-hero__images {
    margin-bottom: calc((-1 * var(--space-lg)) - var(--overflow-gap));
  }

  .section-hero--image.section-hero--screenshot .section-hero__image {
    width: calc(100% - var(--space-md));
  }