.hero-item {
  position: relative;
  background-image: var(--hero-bg);
  background-size: cover;
  background-position: center;
  min-height: 100vh;
  display: flex;
  align-items: end;
  padding: 20rem 0 10.4rem;
}
.hero-item .container-xl {
  margin-bottom: 0;
}
.hero-text {
  max-width: 92.8rem;
}
.hero-text p {
  font-size: 2.4rem;
  line-height: 3.2rem;
  color: var(--white);
  margin-bottom: 3.2rem;
}
.hero-text .h3:first-child {
  margin-top: 0;
}
@media(min-width:1500px) and (max-width:1559.98px) {
  .hero-item {
    padding: 17rem 0 8rem;
  }
}
@media(min-width:1460px) and (max-width:1499.98px) {
  .hero-item {
    padding: 17rem 0 8rem;
  }
  .hero-text p {
    font-size: 2.3rem;
    margin-bottom: 2.8rem;
  }
}
@media(min-width:1360px) and (max-width:1459.98px) {
  .hero-item {
    padding: 18rem 0 8rem;
  }
  .hero-text p {
    font-size: 2.1rem;
    line-height: 2.8rem;
    margin-bottom: 2.4rem;
  }
}
@media(min-width:1200px) and (max-width:1359.98px) {
  .hero-item {
    padding: 17.6rem 0 8rem;
  }
  .hero-text p {
    font-size: 1.9rem;
    line-height: 2.7rem;
    margin-bottom: 2.4rem;
  }
}
@media(min-width:992px) and (max-width:1199.98px) {
  .hero-item {
    padding: 14rem 0 8rem;
  }
  .hero-text {
    max-width: 66rem;
  }
  .hero-text p {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-bottom: 2.4rem;
  }
}
@media(min-width:768px) and (max-width:991.98px) {
  .hero-item {
    min-height: 60rem;
    padding: 14rem 0 8rem;
  }
  .hero-text {
    max-width: 60.8rem;
  }
  .hero-text p {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-bottom: 2rem;
  }
}
@media(max-width:767.98px) {
  .hero-item {
    min-height: 56rem;
    padding: 12rem 0 5.6rem;
  }
  .hero-text p {
    font-size: 1.6rem;
    line-height: 2.4rem;
    margin-bottom: 1.6rem;
  }
  .hero-text br {
    display: none;
  }
}