:root {
  /* ### Primary */
  --color-Purple-50: hsl(260, 100%, 95%);
  --color-Purple-300: hsl(264, 82%, 80%);
  --color-Purple-500: hsl(263, 55%, 52%);
  /* ### Neutral */
  --color-White: hsl(0, 0%, 100%);
  --color-Grey-100: hsl(214, 17%, 92%);
  --color-Grey-200: hsl(0, 0%, 81%);
  --color-Grey-400: hsl(224, 10%, 45%);
  --color-Grey-500: hsl(217, 19%, 35%);
  --color-Dark-blue: hsl(219, 29%, 14%);
  --color-Black: hsl(0, 0%, 7%);
}
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}
html {
  font-size: 62.5%;
}
body {
  min-height: 100svh;
  background-color: var(--color-Grey-100);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Barlow Semi Condensed", sans-serif;
}
.testinomials {
  max-width: 100rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2.4rem;
}
.testinomial {
  padding: 2rem;
  box-shadow: 16px 16px 20px 4px rgba(62, 62, 62, 0.2);
  border-radius: 1.2rem;
}
.header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}
.author-name {
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
}
.author-photo {
  border-radius: 50%;
  width: 4.8rem;
  height: 4.8rem;
}
.status {
  font-size: 1.2rem;
}
.heading {
  margin-bottom: 2rem;
  font-size: 1.8rem;
}
.description {
  font-size: 1.4rem;
  line-height: 1.4;
}

.test-1 {
  grid-row: 1 / 2;
  grid-column: 1 / span 2;
  background-color: var(--color-Purple-500);
  color: var(--color-Purple-50);
  background-image: url("./images/bg-pattern-quotation.svg");
  background-size: 60;
  background-position: top right;
  background-repeat: no-repeat;
}
.test-2 {
  background-color: var(--color-Grey-400);
  color: var(--color-Grey-100);
}
.test-3 {
  grid-column: 1 /2;
  /* grid-row: 2; */
  background-color: var(--color-White);
  color: var(--color-Grey-500);
}
.test-4 {
  grid-column: 2 / span 2;
  grid-row: 2/3;
  background-color: var(--color-Dark-blue);
  color: var(--color-Grey-100);
}
.test-5 {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
  background-color: var(--color-White);
  color: var(--color-Grey-500);
}
@media (max-width: 800px) {
  html {
    font-size: 50%;
  }
  .testinomials {
    max-width: 100%;
  }
}
@media (max-width: 600px) {
  .testinomials {
    max-width: 40rem;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
  }
  .test-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .test-2 {
    grid-row: 2 / 3;
    grid-column: 1 / 2;
  }
  .test-3 {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
  }
  .test-4 {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
  }
  .test-5 {
    grid-row: 5 / 6;
    grid-column: 1 / 2;
  }
}