.homepage-hero {
  padding-top: 12vh;
  position: relative;
  z-index: 1;
  min-height: 80vh;
  height: 650px;
}
.homepage-hero .text {
  position: relative;
  z-index: 2;
  color: var(--white);
  text-align: center;
  font-size: 3rem;
  font-weight: 400;
  font-family: var(--merriweather);
}
.homepage-hero .bridge-background {
  top: -150px;
  width: 100%;
  height: calc(100% + 200px);
  display: block;
  background: center / cover no-repeat;
  position: absolute;
  pointer-events: none;
  object-fit: cover;
}
.bridges {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  bottom: 0;
  z-index: 1;
  overflow: hidden;
}
.homepage-hero .bridges .left-bridge,
.homepage-hero .bridges .right-bridge {
  height: 75%;
  width: 110%;
  object-fit: cover;
  position: absolute;
  bottom: -10%;
  transition: .1s;
}
.homepage-hero .bridges .left-bridge {
  object-position: left;
  right: 0;
}
.homepage-hero .bridges .right-bridge {
  object-position: right;
  left: 0;
}

.homepage-hero + section + section,
.homepage-hero + section {
  position: relative;
  z-index: 2;
}

@media (max-width: 1175px) {
  .homepage-hero { padding-top: 15vh; }
  .homepage-hero .text { font-size: 2.5rem; }
}

@media (min-height: 900px) and (max-width: 1920px) {
  .homepage-hero {
    min-height: unset;
    max-height: 900px;
    padding-top: 77px;
  }
}

@media (min-width: 1920px) {
  .homepage-hero {
    min-height: 35vw;
    padding-top: 5vw;
  }
}

@media (min-height: 900px) and (max-width: 1175px) {
  .homepage-hero {
    padding-top: 100px;
  }
}

@media (max-width: 951px) {
  .homepage-hero { padding-top: 16vh; }
  .homepage-hero .text { font-size: 2rem; }
}
@media (min-height: 900px) and (max-width: 951px) {
  .homepage-hero {
    padding-top: 130px;
  }
}

@media (max-width: 721px) {
  .homepage-hero { padding-top: 109px; }

  .homepage-hero .text { font-size: 1.6rem; }

  .homepage-hero .bridges .left-bridge, .homepage-hero .bridges .right-bridge { height: 100%; bottom: -5%; }
}


@media (max-width: 600px) {
  .homepage-hero {
    /* padding-top: 135px; */
    /* height: 70vh; */
    /* padding-top: 70px; */
    min-height: unset;
    padding-top: 47px;
    height: 450px !important;
  }
}