/* 

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%)

### Neutral

Light gray: hsl(0, 0%, 81%)
Light grayish blue: hsl(210, 46%, 95%)

Note for text colors:

1. "Verified Graduate" has the same color as the person's name with 50% opacity
2. Review paragraphs inside the quotations have the same color as well, but are at 70% opacity

## Typography

### Body Copy

- Font size: 13px

### Font

- Family: [Barlow Semi Condensed](https://fonts.google.com/specimen/Barlow+Semi+Condensed)
- Weights: 500, 600


*/

:root {
  --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%, 81%);
  --Light-grayish-blue: hsl(210, 46%, 95%);
}

@media screen and (min-width: 23em) {
  .testmonial-1,
  .testmonial-2,
  .testmonial-3,
  .testmonial-4,
  .testmonial-5 {
    grid-column: 1 / -1;
  }
}

@media screen and (min-width: 38em) {
  /* .testmonial-1,
  .testmonial-2,
  .testmonial-3,
  .testmonial-4,
  .testmonial-5 {
    grid-column: 1 / -1;
  } */
}

@media screen and (min-width: 54em) {
  /* .container {
    grid-template-areas:
      "a1 a1 a2"
      "a5 a5 a5"
      "a3 a4 a4";
  } */
  .testmonial-1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }
  .testmonial-2 {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }
  .testmonial-3 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .testmonial-4 {
    grid-column: 2 / 4;
    grid-row: 2 / 3;
  }
  .testmonial-5 {
    grid-column: 4 / 5;
    grid-row: 1 / 3;
  }
}

@media screen and (min-width: 75em) {
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

  background-color: var(--Light-grayish-blue);

  padding: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* ----------------------------------------------container-------------------------------- */
.container {
  display: grid;

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  /* grid-auto-columns: 1fr;
  grid-template-areas:
    "a1"
    "a2"
    "a3"
    "a4"
    "a5"; */

  /* column-gap: 18px;
  row-gap: 18px; */
  gap: 1.5rem;
  max-width: 80%;
}

.testmonial-1,
.testmonial-2,
.testmonial-3,
.testmonial-4,
.testmonial-5 {
  border-radius: 10px;
  padding: 16px;
  text-align: left;
}

.testmonial-1 p,
.testmonial-2 p,
.testmonial-3 p,
.testmonial-4 p,
.testmonial-5 p {
  padding-top: 30px;
  color: var(--Light-gray);
}

.testmonial-1 strong,
.testmonial-2 strong,
.testmonial-4 strong {
  color: var(--White);
}

.testmonial-3 strong,
.testmonial-5 strong {
  color: var(--Very-dark-blackish-blue);
}

/* -----------------------------------------------testmonal--1----------------------------------- */
.testmonial-1 {
  background-color: var(--Moderate-violet);
}

#img-quote {
  background-image: url("./images/bg-pattern-quotation.svg");
  background-repeat: no-repeat;
  background-position: top right 10%;
}

/* -----------------------------------------------testmonal--2----------------------------------- */
.testmonial-2 {
  background-color: var(--Very-dark-grayish-blue);
}

/* -----------------------------------------------testmonal--3----------------------------------- */
.testmonial-3 {
  background-color: var(--White);
}

/* -----------------------------------------------testmonal--4----------------------------------- */
.testmonial-4 {
  background-color: var(--Very-dark-blackish-blue);
}

/* -----------------------------------------------testmonal--5----------------------------------- */
.testmonial-5 {
  background-color: var(--White);
}

/* --------------------------------------------------- profile -------------------------------------------- */
.profile {
  display: flex;
  font-size: 10px;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 20px;
}

.profile h1,
.profile h3 {
  padding-left: 20px;
}

.profile h1 {
  font-weight: 600;
}
.profile h3 {
  font-weight: 500;
  color: var(--Light-gray);
}

#color-1 > h1,
#color-2 > h1,
#color-4 > h1 {
  color: var(--White);
}

#color-3 > h1,
#color-5 > h1 {
  color: var(--Very-dark-blackish-blue);
}

/* ====================================================== imgRound ============================================= */
#imgRound {
  border-radius: 100%;
  border: 2px solid var(--Moderate-violet);
}

/* --------------------------------------------attribution--------------------------------------------------------- */
.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}