@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&display=swap");
@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 {
  /* Colors */
  --moderate-violet: hsl(263, 55%, 52%);
  --very-dark-grayish-blue: hsl(217, 19%, 35%);
  --very-dark-blackish-blue: hsl(219, 29%, 14%);
  --white: hsl(0, 0%, 100%);
  --light-gray: hsl(0, 0%, 70%);
  --light-grayish-blue: hsl(210, 46%, 95%);

  /* Typography */
  --font-xs: 0.75rem;
  --font-sm: 0.875rem;
  --font-base: 1rem;
  --font-lg: 1.125rem;
  --font-family: "Barlow Semi Condensed", serif;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 2rem;
}

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

body {
  font-family: var(--font-family);
  background-color: var(--light-grayish-blue);
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonials-grid {
  max-width: 1000px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-xl);
  grid-template-areas:
    "card-daniel card-daniel card-jonathan card-kira"
    "card-jeanette card-patrick card-patrick card-kira";
}

/* Base card styles */
.testimonial-card {
  padding: var(--space-lg);
  background-color: var(--white);
  border-radius: var(--space-sm);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

/* Header styles */
.testimonial-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.avatar {
  width: var(--space-xl);
  height: var(--space-xl);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Typography base styles */
.user-name {
  font-size: var(--font-sm);
  font-weight: normal;
}

.user-status {
  font-size: var(--font-xs);
  color: var(--light-gray);
}

.testimonial-highlight {
  font-size: var(--font-lg);
  margin-top: var(--space-md);
}

.testimonial-text {
  font-size: var(--font-xs);
  margin-top: var(--space-md);
  line-height: 1.4;
}

/* Dark themed cards (purple, gray, dark) */
.card-purple,
.card-gray,
.card-dark {
  color: var(--white);
}

.card-purple .user-name,
.card-gray .user-name,
.card-dark .user-name {
  color: var(--white);
}

.card-purple .testimonial-text,
.card-gray .testimonial-text,
.card-dark .testimonial-text {
  color: var(--light-gray);
}

/* Individual card colors and areas */
.card-purple {
  background-color: var(--moderate-violet);
  grid-area: card-daniel;
  position: relative;
  overflow: hidden;
}

.card-purple::before {
  content: "“";
  position: absolute;
  color: rgba(255, 255, 255, 0.15);
  font-family: sans-serif;
  font-size: 25rem;
  top: -75px;
  right: 40px;
}

.card-gray {
  background-color: var(--very-dark-grayish-blue);
  grid-area: card-jonathan;
}

.card-dark {
  background-color: var(--very-dark-blackish-blue);
  grid-area: card-patrick;
}

/* White cards specific styles */
.card-white {
  background-color: var(--white);
}

.card-white .user-name,
.card-white .testimonial-highlight {
  color: var(--very-dark-blackish-blue);
}

.card-white .testimonial-text {
  color: var(--very-dark-grayish-blue);
}

.card-kira {
  grid-area: card-kira;
}

.card-jeanette {
  grid-area: card-jeanette;
}

@media screen and (max-width: 700px) {
  .testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "card-daniel"
      "card-jonathan"
      "card-jeanette"
      "card-patrick"
      "card-kira";
  }
}

@media screen and (max-width: 400px) {
    .card-purple::before {
        content: "“";
        font-size: 22rem;
        top: -70px;
        right: 0;
      }
}