:root {
  --body-font: "Barlow Semi Condensed", sans-serif;

  --primary-color-50: hsl(260, 100%, 95%);
  --primary-color-300: hsl(264, 82%, 80%);
  --primary-color-500: hsl(263, 55%, 52%);

  --neutral-color-100: hsl(214, 17%, 92%);
  --neutral-color-200: hsl(0, 0%, 81%);
  --neutral-color-300: hsl(224, 10%, 45%);
  --neutral-color-400: hsl(217, 19%, 35%);
  --neutral-color-500: hsl(219, 29%, 14%);

  --white: hsl(0, 0%, 100%);
  --dark-blue: hsl(219, 29%, 14%);
  --black: hsl(0, 0%, 7%);
}

* {
  margin: 0;
  padding: 0;
}

body,
html {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: var(--body-font);
  background: var(--white);
  max-width: 1140px;
  margin: 0 auto;
  line-height: 1.2;
  overflow: hidden;
}
.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90vh;
  padding: 4em 1.5em;
}

h2 {
  font-size: 20px;
  font-weight: 500;
}

p {
  font-size: 13px;
  font-weight: 400;
}

/** Testimonial  **/
.card.light .testimonial-avatar .avatar-info .name,
.card.light .headline {
  color: var(--neutral-color-500);
}
.card.light .testimonial-avatar .avatar-info .title,
.card.light .quote {
  color: var(--neutral-color-400);
}

.card.dark-gray .testimonial-avatar .avatar-info .name,
.card.purple .testimonial-avatar .avatar-info .name,
.card.gray .testimonial-avatar .avatar-info .name,
.card.dark-gray .headline,
.card.purple .headline,
.card.gray .headline {
  color: var(--white);
}
.card.dark-gray .testimonial-avatar .avatar-info .title,
.card.purple .testimonial-avatar .avatar-info .title,
.card.gray .testimonial-avatar .avatar-info .title,
.card.dark-gray .quote,
.card.purple .quote,
.card.gray .quote {
  color: var(--neutral-color-100);
}

.testimonials {
  display: flex;
  justify-content: center;
  gap: 1.5em;
}

.testimonials-left {
  flex: 80%;
}

.testimonials-right {
  flex: 20%;
}

.upper-section,
.lower-section {
  margin-bottom: 1.5em;
  display: flex;
  justify-content: center;
  gap: 2em;
}

.upper-section .daniel,
.lower-section .patrick {
  flex: 70%;
}

.upper-section .jonathan,
.lower-section .jeanette {
  flex: 30%;
}

.card .testimonial-avatar {
  display: flex;
  align-items: center;
  gap: 1em;
  margin-bottom: 1em;
}

.card .testimonial-avatar .avatar-info {
  display: grid;
  align-items: center;
  gap: 0.2rem;
}
.card .testimonial-avatar .avatar-info .name {
  font-size: 15px;
}
.card .testimonial-avatar .avatar-info .title {
  font-size: 12px;
}
.card .testimonial-avatar img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.card .headline {
  margin-bottom: 1em;
}

.card.purple .headline {
  padding-right: 1rem;
}

/** Card Light background**/
.card.light {
  background: var(--white);
  border-radius: 10px;
  padding: 2.5em;
  max-width: 80%;
  width: 100%;
  box-shadow: 11px 20px 20px 14px rgba(0, 0, 0, 0.2);
}

/** Card Gray background**/
.card.gray {
  background: var(--neutral-color-400);
  border-radius: 10px;
  padding: 1.5em;
  width: 100%;
  box-shadow: 11px 20px 20px 14px rgba(0, 0, 0, 0.2);
}
/** Card Dark Gray background**/
.card.dark-gray {
  background: var(--neutral-color-500);
  border-radius: 10px;
  padding: 1.5rem;
  width: 100%;
  max-width: 60%;
  box-shadow: 11px 20px 20px 14px rgba(0, 0, 0, 0.2);
}

/** Card Purple background**/
.card.purple {
  background-color: var(--primary-color-500);
  background-image: url("../images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top right 5rem;
  background-size: 100px;
  border-radius: 10px;
  padding: 2rem 2.5rem;
  width: 100%;
  box-shadow: 20px 0px 20px 14px rgba(0, 0, 0, 0.2);
  position: relative;
  color: white;
}

@media (max-width: 991px) {
  .testimonials,
  .upper-section,
  .lower-section {
    display: grid;
  }
  .testimonials {
    gap: 0;
  }

  .upper-section .daniel,
  .lower-section .patick,
  .upper-section .jonathan,
  .lower-section .jeanette {
    flex: 100%;
  }
  .card.light,
  .card.dark-gray {
    max-width: 100%;
    width: auto;
  }
  .card.light.kira {
    min-height: auto;
  }
  .card.purple,
  .card.gray,
  .card.dark-gray {
    width: auto;
  }
}

@media (max-width: 320px) {
  .wrapper {
    padding: 4em 1.5em;
  }
  .card {
    padding: 2rem !important;
  }
}