*, *::before, *::after {
    box-sizing: border-box;
  }
  
* {
    margin: 0;
}
  
html, body {
    height: 100%;
}

body {
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 0.8125rem;
    background-color: var(--neutral-grayish-blue);
    display: flex;
    justify-content: center;
    align-items: center;
} 
  
img {
    display: block;
    max-width: 100%;
}
  
input, button, textarea, select {
    font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

:root {
    --primary-violet: hsl(263, 55%, 52%);
    --primary-grayish-blue: hsl(217, 19%, 35%);
    --primary-blackish-blue: hsl(219, 29%, 14%);
    --primary-white: hsl(0, 0%, 100%);

    --neutral-gray: hsl(0, 0%, 81%);
    --neutral-grayish-blue: hsl(210, 46%, 95%);
}

.testimonials-container {
    display: grid;
    width: min(85%, 70rem);
    padding-block: 3rem;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 17rem;
    grid-gap: 2rem;
    margin: auto;
}

.testimonial {
    border-radius: 0.5rem;
    padding: 2rem;
    box-shadow: 0.1rem 0.3rem 0.8rem #888888;
}

.span-2 {
    grid-column: span 2;
}

.testimonial:nth-child(1) img {
    border: 2px double;
    border-color: rgb(164, 85, 238);
}
.testimonial:nth-child(4) img {
    border: 2px double;
    border-color: var(--primary-violet);
}

.testimonial:last-child {
    grid-column: 4;
    grid-row-start: 1;
    grid-row-end: span 2;
}

/* Background Colors */

.testimonial:nth-child(1) {
    background-color: var(--primary-violet);
}
.testimonial:nth-child(2) {
    background-color: var(--primary-grayish-blue);
}
.testimonial:nth-child(3) {
    background-color: var(--primary-white);
}
.testimonial:nth-child(4) {
    background-color: var(--primary-blackish-blue);
}
.testimonial:last-child {
    background-color: var(--primary-white);
}

.flex {
    display: flex;
    align-items: center;
    padding-bottom: 0.5rem;
}

img {
    border-radius: 50%;
    width: 1.6rem;
    margin-right: 1rem;
}

h5, .position,.header,.quote {
    color: var(--primary-white);
}

h5 {
    font-weight: 600;
}

.position {
    font-size: 0.57rem;
    font-weight: 500;
    opacity: 50%;
}

.header {
    font-weight: 600;
    font-size: 1.25rem;
    padding-bottom: 0.8rem;
    line-height: 1.4rem;
}

.quote {
    font-weight: 500;
    opacity: 70%;
}

.testimonial:nth-child(3) h5{
    color: var(--primary-grayish-blue);
}
.testimonial:nth-child(3) p{
    color: var(--primary-grayish-blue);
}

.testimonial:last-child h5{
    color: var(--primary-grayish-blue);
}
.testimonial:last-child p{
    color: var(--primary-grayish-blue);
}

@media (max-width: 1344px) {
    .testimonials-container {
        width: 95%;
        grid-auto-rows: 21rem;
    }
}

@media (max-width: 800px) {
    .testimonial:nth-child(1) {
        grid-area: one;
    }
    .testimonial:nth-child(2) {
        grid-area: two;
    }
    .testimonial:nth-child(3) {
        grid-area: three;
    }
    .testimonial:nth-child(4) {
        grid-area: four;
    }
    .testimonial:last-child {
        grid-area: five;
    }
    .testimonials-container {
        grid-template-columns: auto;
        grid-auto-rows: auto;
        grid-template-areas: 
        'one'
        'two'
        'three'
        'four'
        'five'
        ;
    }
    .testimonial {
        padding: 1.79rem;
    }
}