@font-face {
  font-display: swap;
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/barlow-semi-condensed-v15-latin-500.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/barlow-semi-condensed-v15-latin-600.woff2') format('woff2');
}

:root{
  --spacing-1450: 7.5rem;     /* 120px */
  --spacing-863: 4.438rem;    /* 71px */
  --spacing-400: 2rem;        /* 32px */
  --spacing-375: 1.875rem;    /* 30px */
  --spacing-325: 1.625rem;    /* 26px */
  --spacing-300: 1.5rem;      /* 24px */
  --spacing-225: 1.125rem;    /* 18px */
  --spacing-200: 1rem;        /* 16px */
  --spacing-50: 0.25rem;      /* 04px */
  
  --font-size-350: 1.75rem;      /* 28px */
  --font-size-250: 1.25rem;      /* 20px */
  --font-size-163: 0.813rem;     /* 13px */
  --font-size-137: 0.688rem;     /* 11px */
  --font-size-100: 0.5rem;       /* 08px */
  
  --moderate-violet: hsla(263, 55%, 52%, 1);
  --very-dark-grayish-blue: hsl(217, 19%, 35%);
  --very-dark-blackish-blue: hsl(219, 29%, 14%);
  --white: hsla(0, 0%, 100%, 1);
  --light-gray: hsla(0, 0%, 81%, 1);
  --light-grayish-blue: hsla(210, 46%, 95%, 1);
}

.testimonial-page{
  background-color: var(--light-grayish-blue);
  padding: var(--spacing-300);
}

.testimonial-container{
  display: grid;
  gap: var(--spacing-300);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-auto-rows: auto;
  /*margin: var(--spacing-863) var(--spacing-300);*/
  margin: 0 auto;
  font-family: 'Barlow Semi Condensed', sans-serif;
}

.testimonial__quote{
  position: absolute;
  top: 0;
  right: var(--spacing-300);
}

.testimonial{
  border-radius: 0.5rem;
  padding: var(--spacing-325) var(--spacing-400) var(--spacing-400);
}

.testimonial:first-child{
  background-color: var(--moderate-violet);
  color: var(--white);
  position: relative;
}

.testimonial__title--highlighted{
  position: relative;
  z-index: 1;
}

.testimonial:nth-child(2){
  background-color: var(--very-dark-grayish-blue);
  color: var(--white);
}

.testimonial:nth-child(3){
  background-color: var(--white);
  color: var(--very-dark-grayish-blue)
}

.testimonial:nth-child(4){
  background-color: var(--very-dark-blackish-blue);
  color: var(--white);
}

.testimonial:last-child{
  background-color: var(--white);
  color: var(--very-dark-grayish-blue);
}

.testimonial__author{
  display: flex;
  gap: var(--spacing-200);
  margin-bottom: var(--spacing-225)
}

.testimonial__author-name{
  font-size: var(--font-size-163);
  line-height: 1;
}

.testimonial__author-graduate-status{
  font-size: var(--font-size-137);
  line-height: 1;
  opacity: 50%;
}

.testimonial__title{
  font-size: var(--font-size-250);
  line-height: 1.2;
  margin-bottom: var(--spacing-200)
}

.testimonial__body{
  font-size: var(--font-size-163);
  line-height: 1.38;
  opacity: 70%;
}

@media (min-width: 45.25rem) and (max-width: 67.5rem){
  .testimonial-container{
    grid-template-columns: repeat(auto-fit, minmax(225px, 3fr));
  }
  
  .testimonial:first-child{
    grid-column: 1/3;
    grid-row: span 1;
  }
  
  .testimonial__quote{
    position: absolute;
    top: 0;
    right: 5rem;
  }
  .testimonial:nth-child(2){
    grid-column: 1/span 1;
    grid-row: 2/span 1;
  }
  
  .testimonial:nth-child(4){
    grid-column: 2/span 2;
  }
  
  .testimonial:last-child{
    grid-column: span 3;
  }
}

@media (min-width: 67.5rem){
  .testimonial-page{
    height: 100vh;
    display: flex;
    align-items: center;
  }
  
  .testimonial-container{
    grid-template-columns: repeat(auto-fit, minmax(225px, 4fr));
    grid-template-rows: repeat(2, 1fr);
    margin: var(--spacing-1450) auto;
    max-width: 1110px;
    width: 90%;
  }
  
  .testimonial:first-child{
    grid-column: 1/3;
    grid-row: span 1;
  }
  
  .testimonial__quote{
    position: absolute;
    top: 0;
    right: 5rem;
  }
  
  .testimonial:nth-child(2){
    grid-column: 3/4;
    grid-row: span 1;
  }
  
  .testimonial:nth-child(3){
    grid-column: 1/2;
    grid-row: span 1;
  }
  
  .testimonial:nth-child(4){
    grid-column: 2/4;
    grid-row: span 1;
  }
  
  .testimonial:last-child{
    grid-column: 4/5;
    grid-row: 1/3;
  }
}