:root {
  /* Fonts */
  --primary-font: "Barlow Semi Condensed";
  --font-weight-regular: 400;
  --font-weight-semi-bold: 600;

  /* Primary Colors */
  --clr-moderate-violet: hsl(263, 55%, 52%);
  --clr-dark-grayish-blue: hsl(217, 19%, 35%);
  --clr-dark-blackish-blue: hsl(219, 29%, 14%);
  --clr-white: hsl(0, 0%, 100%);

  /* Neutral Colors */
  --clr-light-gray: hsl(0, 0%, 81%);
  --clr-light-grayish-blue: hsl(210, 46%, 95%);
}

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

body {
  font-family: var(--primary-font);
  background-color: var(--clr-light-grayish-blue);
  max-height: 100vh;
}

main {
  display: grid;
  place-content: center;
}

img {
  max-width: 100%;
}

.container {
  max-width: 1100px;
  margin: 5rem auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.5rem 1.875rem;
}

.testimonial__author {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
}

.testimonial__name {
  margin-left: 17px;
}

.testimonial__name .testimonial__title {
  font-size: 13px;
}

.testimonial__name .testimonial__verified {
  font-size: 11px;
}

.testimonial__image {
  border-radius: 50%;
  width: 1.75rem;
  height: 1.75rem;
  align-self: flex-start;
}

.testimonial {
  padding: 1.625rem 2rem;
  border-radius: 8px;
  box-shadow: 4px 6px 5px rgba(70, 85, 106, 0.1);
}

.testimonial__lead {
  font-size: 20px;
  margin-bottom: 1rem;
}

.testimonial__quote {
  font-size: 13px;
  line-height: 18px;
}

.testimonial__title {
  font-weight: var(--font-weight-regular);
}

.testimonial-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  background: url("../images/bg-pattern-quotation.svg") no-repeat right 80px top;
  background-color: var(--clr-moderate-violet);
}

.testimonial-1 .testimonial__image {
  border: 2px solid hsl(264, 82%, 70%);
}

.testimonial-1 .testimonial__verified {
  color: var(--clr-white);
  opacity: 50%;
  font-weight: var(--font-weight-regular);
}

.testimonial-1 .testimonial__title {
  color: var(--clr-white);
}

.testimonial-1 .testimonial__lead {
  color: var(--clr-white);
}

.testimonial-1 .testimonial__quote {
  color: var(--clr-light-gray);
}

.testimonial-2 {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
  background-color: var(--clr-dark-grayish-blue);
}

.testimonial-2 .testimonial__verified {
  color: var(--clr-white);
  opacity: 50%;
  font-weight: var(--font-weight-regular);
}

.testimonial-2 .testimonial__title {
  color: var(--clr-white);
}

.testimonial-2 .testimonial__lead {
  color: var(--clr-white);
}

.testimonial-2 .testimonial__quote {
  color: var(--clr-white);
  opacity: 70%;
}

.testimonial-3 {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  background-color: var(--clr-white);
}

.testimonial-3 .testimonial__title {
  color: var(--clr-dark-grayish-blue);
}

.testimonial-3 .testimonial__verified {
  color: var(--clr-dark-grayish-blue);
  opacity: 50%;
  font-weight: var(--font-weight-regular);
}

.testimonial-3 .testimonial__lead {
  color: var(--clr-dark-grayish-blue);
}

.testimonial-3 .testimonial__quote {
  color: var(--clr-dark-grayish-blue);
  opacity: 70%;
}

.testimonial-4 {
  grid-column: 2 / 4;
  grid-row: 2 / 3;
  background-color: var(--clr-dark-blackish-blue);
}

.testimonial-4 .testimonial__image {
  border: 2px solid hsl(264, 82%, 70%);
}

.testimonial-4 .testimonial__verified {
  color: var(--clr-white);
  opacity: 50%;
  font-weight: var(--font-weight-regular);
}

.testimonial-4 .testimonial__title {
  color: var(--clr-white);
}

.testimonial-4 .testimonial__lead {
  color: var(--clr-white);
}

.testimonial-4 .testimonial__quote {
  color: var(--clr-light-gray);
}

.testimonial-5 {
  grid-column: 4 / 5;
  grid-row: 1 / 3;
  background-color: var(--clr-white);
}

.testimonial-5 .testimonial__verified {
  color: var(--clr-dark-grayish-blue);
  opacity: 50%;
  font-weight: var(--font-weight-regular);
}

.testimonial-5 .testimonial__title {
  color: var(--clr-dark-grayish-blue);
}

.testimonial-5 .testimonial__lead {
  color: var(--clr-dark-grayish-blue);
}

.testimonial-5 .testimonial__quote {
  color: var(--clr-dark-grayish-blue);
  opacity: 70%;
}

/* Media Query */
@media screen and (max-width: 1100px) {
  .container {
    grid-template-columns: 327px;
    grid-template-rows: auto;
    justify-content: center;
    margin-bottom: 5rem;
  }

  .testimonial-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
  }

  .testimonial-2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }

  .testimonial-5 {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
  }

  .testimonial-4 {
    grid-column: 1 / 2;
    grid-row: 4 / 5;
  }

  .testimonial-3 {
    grid-column: 1 / 2;
    grid-row: 5 / 6;
  }
}