.reviews-hero{
  height:60vh;
  min-height:30rem;

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;

  background:
  url("img2.jpeg")
  center/cover no-repeat;
}

.hero-overlay{
  position:absolute;
  inset:0;

  background:
  rgba(0,0,0,.55);
}

.reviews-hero-content{
  position:relative;
  z-index:2;

  max-width:45rem;
  padding:0 2rem;
}

.reviews-hero-content h1{
  font-family:'Playfair Display',serif;

  font-size:clamp(2.5rem,7vw,5rem);

  color:white;

  margin-bottom:1rem;
}

.reviews-hero-content h1 span{
  color:var(--gold);
}

.reviews-hero-content p{
  color:white;
}

#reviewsSection{
  background:var(--cream);
}

#reviewsContainer{

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(20rem,1fr));

  gap:1.5rem;

  margin-top:3rem;
}

.review-card{

  background:white;

  border-radius:1rem;

  padding:1.5rem;

  box-shadow:
  0 .5rem 1.5rem rgba(0,0,0,.08);

  transition:.3s;
}

.review-card:hover{

  transform:
  translateY(-.4rem);
}

.review-stars{

  font-size:1.2rem;

  margin-bottom:1rem;
}

.review-message{

  line-height:1.8;

  color:var(--stone);

  margin-bottom:1rem;
}

.review-user{

  border-top:
  .1rem solid #eee;

  padding-top:1rem;
}

.review-user strong{

  display:block;

  color:var(--pine);
}

.review-user span{

  color:var(--amber);

  font-size:.9rem;
}

.loading{

  text-align:center;

  grid-column:1/-1;

  font-size:1.2rem;
}

.no-reviews{

  text-align:center;

  grid-column:1/-1;

  color:var(--stone);
}

@media(max-width:48rem){

  .reviews-hero{

    min-height:24rem;
  }

  #reviewsContainer{

    grid-template-columns:1fr;
  }
}