/* Recommended Structure */
:root {
  /* Color Variables --> */
  --PURPLE-CARD-BG: hsl(263, 55%, 52%);
  --GREY-BG: hsl(214, 17%, 92%);
  --WHITE-COLOR: white;
  --PURPLE-COLOR: hsl(260, 100%, 95%);
  --DARK-BLUE-CLR: hsl(219, 29%, 14%);
  --GREY-CLR: hsl(217, 19%, 35%);

  /* font variables --> */

  /* space variables --> */
  --MARGIN-spc: 1.5rem;
}

/* Base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Barlow Semi Condensed", sans-serif;
}
/* Layout */
.container {
  padding: clamp(1rem, 5vw, 3rem);
  min-width: 100%;
  min-height: 100vh;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(100px, auto);
  background-color: var(--GREY-BG);
}

/* Components */
.card {
  width: 100%;
  min-height: 250px;
  padding: clamp(1rem, 5vw, 2.5rem);
  color: var(--WHITE-COLOR);
  border-radius: 15px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
}

.card img {
  border: 1px solid hsl(264, 82%, 80%);
  border-radius: 50%;
}
.profile {
  display: flex;
  align-items: center;
  margin-bottom: var(--MARGIN-spc);
}

.profile p {
  font-size: 1.5rem;
  margin-left: var(--MARGIN-spc);
  font-weight: 600;
}
.profile p span {
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--PURPLE-COLOR);
}

/* Utilities */
.testimonial {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: var(--MARGIN-spc);
}
.card .bio {
  font-size: 1rem;
  color: hsl(260, 100%, 95%);
}

.Jonathan p span,
.Jonathan .bio {
  color: hsl(0, 0%, 81%);
}

.Patrick p span,
.Patrick .bio {
  color: var(--WHITE-COLOR);
}
.Kira img,
.Jeanette img {
  border: none;
}
.Kira .profile p,
.Kira .testimonial,
.Jeanette .profile p,
.Jeanette .testimonial {
  color: var(--DARK-BLUE-CLR);
}

.Jeanette .profile p span,
.Jeanette .bio,
.Kira .profile p span,
.Kira .bio {
  color: var(--GREY-CLR);
}

/* Card variants */
.Daniel {
  grid-column: span 2;
  background-color: var(--PURPLE-CARD-BG);
}
.Jonathan {
  background-color: hsl(217, 19%, 35%);
}
.Jeanette {
  grid-row: span 2;
  background-color: white;
}

.Patrick {
  grid-column: span 2;
  background-color: hsl(219, 29%, 14%);
}
@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
  .card {
    grid-column: span 1;
  }
}