@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&display=swap');

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

  /* verified graduate has the same color as the person"s name with 50% opacity. review paragraph as the same color with 70% opacity */
  --ff-Barlow: 'Barlow Semi Condensed', sans-serif;
}

html {
  scroll-behavior: smooth;
}

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

img {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

body {
  line-height: 1.6;
  font-weight: 500;
  font-size: 0.825rem;
  font-family: var(--ff-Barlow);
  min-height: 100dvh;
  background-color: var(--light-grayish-blue);
}

/* utility classes */

.content--wrapper {
  margin-inline: auto;
  width: min(1300px, 100% - 3rem);
}

.purple--bg {
  background-color: var(--moderate-violet);
}

.white--bg {
  background-color: var(--white);
}

.black--bg {
  background-color: var(--very-dark-blackish-blue);
}

.gray--bg {
  background-color: var(--very-dark-grayish-blue);
}

.primary-text-clr {
  color: var(--white);
}

.primary-text-clr-50 {
  color: var(--white);
  opacity: 0.5;
}

.primary-text-clr-70 {
  color: var(--white);
  opacity: 0.7;
}

.secondary-text-clr {
  color: var(--very-dark-blackish-blue);
}

.secondary-text-clr-50 {
  color: var(--very-dark-blackish-blue);
  opacity: 0.5;
}

.secondary-text-clr-70 {
  color: var(--very-dark-blackish-blue);
  opacity: 0.7;
}

/* main-styles */
.testimonial.grid {
  padding-block: 2rem;
  display: grid;
  gap: 2.5rem;
}

.testimonial__article {
  padding: 2rem;
  border-radius: 0.625rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: grid;
  gap: 1rem;
  transition: all 400ms;
}

.testimonial__article:first-child {
  background-image: url('./images/bg-pattern-quotation.svg');
  background-repeat: no-repeat;
  background-position: right 20px top 20px;
}

.testimonial__article:hover {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.testimonial__article .heading {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.testimonial__article img {
  border-radius: 50%;
  width: 3rem;
  border: 2px solid transparent;
}

@media screen and (width >= 768px) {
  .testimonial.grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

@media screen and (width >= 900px) {
  .testimonial.grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (width >= 1200px) {
  .testimonial.grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
  }

  .testimonial__article:first-child {
    background-position: right 160px top 0;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
  }

  .testimonial__article:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / -1;
  }

  .testimonial__article:nth-child(4) {
    grid-column: 2 / 4;
  }

  .testimonial__article:last-child {
    grid-column: 4 / -1;
    grid-row: 1 / -1;
  }
}