:root {
  --ff-Barlow: "Barlow Semi Condensed", sans-serif;
  --fw-normal: 500;
  --fw-bold: 600;

  --fs-100: 0.6875rem;
  --fs-200: 0.8125rem;
  --fs-300: 1.25rem;

  --clr-purple-50: hsl(260, 100%, 95%);
  --clr-purple-300: hsl(264, 82%, 80%);
  --clr-purple-500: hsl(263, 55%, 52%);
  --clr-white-100: hsl(0, 0%, 96%);
  --clr-white-200: hsl(0, 0%, 100%);
  --clr-Grey-100: hsl(214, 17%, 92%);
  --clr-Grey-200: hsl(0, 0%, 81%);
  --clr-Grey-400: hsl(224, 10%, 45%);
  --clr-Grey-500: hsl(217, 19%, 35%);
  --clr-Darkblue: hsl(219, 29%, 14%);
  --clr-Black: hsl(0, 0%, 7%);
}

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

body {
  background-color: var(--clr-white-100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem;
  font-family: var(--ff-Barlow);
  /* height: 100vh; */
}

.grid-layout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "card-a card-a card-b card-c"
    "card-d card-e card-e card-c";
  gap: 1.5rem;
  width: min(95%, 70rem);
  margin-inline: auto;
}

.card {
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 1.5px 4px 0 rgba(44, 62, 80, 0.08);
}

.author {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.author img {
  height: 2rem;
  width: 2rem;
  border-radius: 50%;
}

.name {
  font-weight: var(--fw-normal);
  font-size: var(--fs-200);
}

.verified {
  font-weight: var(--fw-normal);
  font-size: var(--fs-100);
}

.tetimonial-title {
  font-weight: var(--fw-bold);
  font-size: var(--fs-300);
  margin-bottom: 1rem;
}

.card-a {
  grid-area: card-a;
  background-color: var(--clr-purple-500);
  background-image: url(./images/bg-pattern-quotation.svg);
  background-repeat: no-repeat;
  background-position: top right 10%;
  color: var(--clr-white-100);
}
.card-b {
  grid-area: card-b;
  background-color: var(--clr-Grey-500);
  color: var(--clr-white-200);
}
.card-c {
  grid-area: card-c;
  background-color: var(--clr-white-200);
  color: var(--clr-Grey-500);
}
.card-d {
  grid-area: card-d;
  background-color: var(--clr-white-200);
  color: var(--clr-Grey-500);
}
.card-e {
  grid-area: card-e;
  background-color: var(--clr-Darkblue);
  color: var(--clr-Grey-400);
}

/* MEDIA QUERRIES */

@media (max-width: 1200px) {
  .grid-layout {
    /* grid-auto-columns: 1fr; */
    grid-template-areas:
      "card-a card-a card-b card-c"
      "card-d card-e card-e card-c";
  }
}

@media (max-width: 1000px) {
  .grid-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card-a"
      "card-b"
      "card-d"
      "card-c"
      "card-e";
  }
}

@media (max-width: 700px) {
  body {
    padding: 3rem;
  }
  .card-a {
    background-image: none;
  }
}
@media (max-width: 500px) {
  body {
    padding: 1.8rem;
  }
}