/**
 * @file
 * Review styles
 */

.review {
  display: grid;
  gap: 1.5rem;
}

.review__wrapper {
  display: flex;
  flex-direction: column;
  max-width: 700px;
  margin: 0 auto;
}

.review__annotation{
  position: relative;
  color: var(--color-primary--3);
  font-weight: 850;
  margin-bottom: 1.5rem;
}
.review__annotation::before{
  position: absolute;
  content: url(../../images/review/quotes.svg);
  margin-top: -3rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.review__text {

}

.review__text p{
  font-size: 1.2rem;
  font-style: italic;
  font-weight: 300;
  line-height: 150%; /* 36px */
}


.review__rating {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.review__star--1 {
  content: url(../../images/review/1-star.svg);
}
.review__star--2 {
  content: url(../../images/review/2-star.svg);
}
.review__star--3 {
  content: url(../../images/review/3-star.svg);
}
.review__star--4 {
  content: url(../../images/review/4-star.svg);
}
.review__star--5 {
  content: url(../../images/review/5-star.svg);
}

.review__name p{
  font-weight: 300;
}

.review__name p a{
color: var(--color-neutral--1);
font-weight: 300;
}



@media all and (min-width: 750px) {
  .review__annotation::before{
    position: absolute;
    content: url(../../images/review/quotes.svg);
    margin-left: -5rem;
    margin-top: 1rem;
    top: inherit;
    left: inherit;
    transform: inherit;
  }
  .review__text p{
    font-size: 1.5rem;
  }
}