/*
******************************
** Review Styles
******************************
*/
/*
******************************
** Media Query Mixin
******************************
*/
.reviews {
  display: grid;
  gap: 30px;
  margin: 60px 0 40px;
}
@media screen and (min-width:650px) {
  .reviews {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width:768px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
    margin: 80px 0;
  }
}
@media screen and (min-width: 1401px) {
  .reviews {
    grid-template-columns: repeat(4, 1fr);
  }
}
.reviews .review-item {
  padding: 65px 25px 55px;
  position: relative;
  background: var(--color-shade-light);
  color: var(--color-main);
}
.reviews .review-item:before {
  content: "";
  background: url("../Images/quotes-orange.png") no-repeat;
  position: absolute;
  top: -10px;
  left: 25px;
  width: 72px;
  height: 48px;
}
.reviews .review-item.highlight {
  background: var(--color-highlight);
  color: var(--color-minor);
}
.reviews .review-item.highlight:before {
  background: url("../Images/quotes-blue.png") no-repeat;
}
.reviews .review-item.highlight .name {
  color: var(--color-main);
}
.reviews .review-item.main {
  background: var(--color-main);
  color: var(--color-minor);
}
.reviews .review-item .name {
  color: var(--color-highlight);
  position: absolute;
  bottom: 20px;
  width: calc(100% - 50px);
}