.hero {
  background-image: linear-gradient(to bottom, transparent 80%, rgb(0, 0, 0)), url(/img/higher-then-us/higher-then-us-hero.png);
  max-height: 100vh;
}

.hero .message {
  display: grid;
  grid-template-rows: 33% 34% 33%;
  height: 100%;
}

.hero .message h1 {
  font-size: 4rem;
  line-height: 4rem;
}

.message>* {
  align-content: center;
}

#content>section {
  margin-top: 4.5rem;
}

#content>section:last-child {
  padding-bottom: 4.5rem;
  border-bottom: 1px solid var(--prim-color);
}

#second-info {
  margin-left: -1.65rem;
  margin-top: 3rem;
  font-size: 0.9rem;
}

#second-info li {
  list-style: none;
  margin-bottom: 0.8rem;
  display: flex;
  flex-direction: row;
}

#second-info li .logo {
  margin-right: 0.8rem;
}

#project-cast>h1,
#project-locations>h1 {
  border-bottom: 1px solid var(--prim-color);
  margin-bottom: 1.5rem;
}

.carousel-img-wrapper p {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 70%, rgba(0, 0, 0, 0.75) 100%);
  height: 100%;
  place-content: end;
  text-align: center;
  padding-bottom: 0.5rem;
  background-size: 100% 200%;
  background-position: top;
  transition: background-position 0.25s ease;
}

.carousel-img-wrapper p:hover {
  background-position: bottom;
}

@media (max-width: 900px) {
  .hero .message {
    grid-template-rows: 15% 50% 35%;
  }
}