*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family: "Barlow Semi Condensed", serif;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reviews__grid {
  width: 80%;
  margin: clamp(3.75rem, 10vw, 5rem) auto;
  display: grid;
  grid-template-columns: 100%;
  row-gap: clamp(1.25rem, 4vh, 1.875rem);
}

@media (min-width: 48rem) {
  .reviews__grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    column-gap: 2.5rem;
  }
  .grid__card--top-left {
    grid-column: 1/3;
    grid-row: 1;
    background-image: url("images/bg-pattern-quotation.svg");
    background-repeat: no-repeat;
    background-position: calc(100% - clamp(1.875rem, 3vw, 3.125rem)) 0;
    background-size: clamp(5rem, 8vw, 7.5rem);
  }
  .grid__card--right {
    grid-column: 4;
    grid-row: 1/3;
  }
  .grid__card--bottom-center {
    grid-column: 2/4;
    grid-row: 2;
  }
}
.grid__card {
  padding: 1.875rem;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 8px 8px 40px rgba(0, 0, 0, 0.15),
    16px 16px 80px rgba(0, 0, 0, 0.08);
}

.card__heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  font-weight: 400;
}
.card__heading .card__img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.card__heading .card__img--purple-border {
  border: 2px solid hsl(263, 55%, 52%);
}
.card__heading .card__img--light-purple-border {
  border: 2px solid hsl(264, 82%, 80%);
}
.card__heading .card__author {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}
.card__heading .card__author-status {
  display: block;
  font-weight: 400;
}

.card__text {
  margin: 0;
}

.grid__card--purple {
  background-color: hsl(263, 55%, 52%);
  color: hsl(0, 0%, 100%);
}

.grid__card--grey {
  background-color: hsl(217, 19%, 35%);
  color: hsl(0, 0%, 100%);
}

.grid__card--darkblue {
  background-color: hsl(219, 29%, 14%);
  color: hsl(0, 0%, 100%);
}

.grid__card--white {
  background-color: hsl(0, 0%, 100%);
  color: hsl(217, 19%, 35%);
}

.attribution {
  font-size: 0.6875rem;
  text-align: center;
  margin-bottom: 0.625rem;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

/*# sourceMappingURL=style.css.map */