@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Young+Serif&display=swap");

:root {
  /* Black / White */
  --color-black: #121212;
  --color-dark-blue: #19202d;
  --color-white: #ffffff;

  /* Greyscales */
  --color-grey-100: #e7eaee;
  --color-grey-200: #cfcfcf;
  --color-grey-400: #676d7e;
  --color-grey-500: #48556a;

  /* Purples */
  --color-purple-50: #ede4ff;
  --color-purple-300: #a775f1;
  --color-purple-500: #733fc8;

  /* Spacings */
  --spacing-500: 40px;
  --spacing-400: 32px;
  --spacing-300: 24px;
  --spacing-200: 16px;
  --spacing-100: 8px;
  --spacing-50: 4px;
}

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

/* Base Font Setup */
body {
  font-family: "Barlow Semi Condensed", sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(71px, 8vh, 120px) clamp(20px, 5vw, 60px);
}

.text-preset-1 {
  font-size: 20px;
  font-weight: 600; /* Semibold */
  line-height: 1.2; /* 120% */
  letter-spacing: 0px;
}

.text-preset-2 {
  font-size: 13px;
  font-weight: 500; /* Medium */
  line-height: 1.1; /* 110% */
  letter-spacing: 0px;
}

.text-preset-3 {
  font-size: 13px;
  font-weight: 500; /* Medium */
  line-height: 1.4; /* 140% */
  letter-spacing: 0px;
}

.text-preset-4 {
  font-size: 11px;
  font-weight: 500; /* Medium */
  line-height: 1.1; /* 110% */
  letter-spacing: 0px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  width: 90%;
  grid-gap: 2rem;
  grid-template-areas:
    "daniel"
    "jonathan"
    "jeanette"
    "patrick"
    "kira";
  max-width: 1140px;
}

.card {
  padding: 2rem;
  border-radius: 0.5rem;
  /* box-shadow: [x-offset] [y-offset] [blur] [spread] [color]; */
  box-shadow: 40px 30px 50px 0px var(--color-grey-200);
}

.card > figcaption {
  display: flex;
  gap: 1.0625rem;
}

h3 {
  margin: 1rem 0;
}

img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 2px solid var(--color-purple-300);
}

.card1 {
  background-color: var(--color-purple-500);
}

.card2 {
  background-color: var(--color-grey-500);
}

.card3 {
  background-color: var(--color-white);
}

.card4 {
  background-color: var(--color-dark-blue);
}

.card5 {
  background-color: var(--color-white);
}

/* Card text colors starting here */
.card1 p,
.card1 > h3,
.card2 p,
.card2 > h3 {
  color: var(--color-white);
}

.card2 span {
  color: var(--color-grey-200);
}

.card1 span,
.card1 > blockquote {
  color: var(--color-purple-50);
}

.card2 > blockquote {
  color: var(--color-grey-100);
}

.card3 p,
.card3 > h3 {
  color: var(--color-grey-500);
}

.card3 span,
.card3 > blockquote {
  color: var(--color-grey-400);
}

.card4 p,
.card4 span {
  color: var(--color-white);
}

.card4 > h3 {
  color: var(--color-grey-200);
}

.card4 > blockquote {
  color: var(--color-grey-100);
}

.card5 p {
  color: var(--color-grey-500);
}

.card span {
  color: var(--color-grey-200);
}

.card5 > h3 {
  color: var(--color-grey-500);
}

.card5 > blockquote {
  color: var(--color-grey-400);
}

/* Mapping card classes to grid names */
.card1 {
  grid-area: daniel;
}

.card2 {
  grid-area: jonathan;
}

.card3 {
  grid-area: jeanette;
}

.card4 {
  grid-area: patrick;
}

.card5 {
  grid-area: kira;
}

/* Media queries for larger screen sizes */
@media (min-width: 768px) {
  .testimonial-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "daniel daniel"
      "jonathan jeanette"
      "patrick patrick"
      "kira kira";
  }
  .card1 {
    background-image: url(bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: right 75px top 0px;
  }
}

@media (min-width: 1250px) {
  .testimonial-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      "daniel daniel jonathan kira"
      "jeanette patrick patrick kira";
    row-gap: 1.5rem;
  }
}