:root {
  --clr-primary-400: 263 55% 52%;
  --clr-secondary-400: 217 19% 35%;
  --clr-secondary-500: 219 29% 14%;
  --clr-neutral-100: 0 0% 100%;
  --clr-neutral-200: 210 46% 95%;
  --clr-neutral-300: 0 0% 81%;

  --ff-primary: "Barlow Semi Condensed", sans-serif;

  --fw-400: 500;
  --fw-700: 600;

  --fs-300: 0.6875rem;
  --fs-400: 0.8125rem;
  --fs-500: 1.25rem;
}

* {
  margin: 0;
  box-sizing: border-box;
}

body {
  font-size: 13px;
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 500;
  background-color: hsl(var(--clr-neutral-200));
  min-height: 100vh;
  place-content: center;
  display: grid;
}

.testimonial-grid {
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1 fr 1fr;
  display: grid;
  gap: 1.5rem;
  max-width: 1000px;
  justify-content: center;
}

.grid-col-span-2 {
  grid-column: span 2;
}

.big-quote {
  background-image: url("./images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top right 10%;
}

.testimonial {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  border-radius: 0.5rem;
  box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
}

.testimonial:last-child {
  grid-column-start: 4;
  grid-row-start: 1;
  grid-row-end: 3;
}

.testimonial-img {
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  aspect-ratio: 1;
}

.bg-primary-400 {
  background: hsl(var(--clr-primary-400));
}
.bg-secondary-400 {
  background-color: hsl(var(--clr-secondary-400));
}
.bg-secondary-500 {
  background: hsl(var(--clr-secondary-500));
}

.bg-neutral-100 {
  background: hsl(var(--clr-neutral-100));
}

.text-neutral-100 {
  color: hsl(var(--clr-neutral-100));
}
.text-secondary-400 {
  color: hsl(var(--clr-secondary-400));
}
.border-primary-400 {
  border: 2px solid #a775f1;
}

.flex {
  display: flex;
  padding-top: 1rem;
  padding-bottom: 0.9rem;
  gap: 1rem;
}

@media (max-width: 50em) {
  .testimonial-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 3;
  }

  .testimonial:last-child {
    grid-column-start: auto;
    grid-row-start: auto;
    grid-row-end: auto;
  }

  .testimonial:nth-child(4) {
    grid-column-start: auto;
    grid-row-start: auto;
    grid-row-end: auto;
  }
}