.hero {
  min-height: 85vh;
  background:
    linear-gradient(rgba(18, 8, 24, 0.7), rgba(18, 8, 24, 0.9)),
    url("../images/lavender.webp");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 0 10%;
}

.hero-text {
  max-width: 600px;
}

.hero h1 {
  font-size: 60px;
  color: #ffdd77;
  margin-bottom: 20px;
}

.hero p {
  font-size: 22px;
  margin-bottom: 30px;
}

.featured {
  padding: 70px 8%;
  text-align: center;
}

.featured h2 {
  font-size: 38px;
  color: #ffdd77;
  margin-bottom: 40px;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: 38px;
  }

  .hero p {
    font-size: 18px;
  }
}