:root {
    --clr-primary-400:263, 55%, 52%;
    --clr-secondary-400:217, 19%, 35%;
    --clr-secondary-500:219, 29%, 14%;
    --clr-neutral-100:0, 0%, 100%;
    --clr-neutral-200:210, 46%, 95%;
    --clr-neutral-300:0, 0%, 81%;
    
    --ff-primary:"Barlow Semi Condensed", sans-serif;

    --fs-300:11px;
    --fs-400:13px;
    --fs-500:1.25rem;

    --fw-500:500;
    --fw-700:600;    
}

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

* {
    margin: 0;
}

body {
    min-height: 100vh;
    display: grid;
    align-content: center;
    justify-content: center;
    background-color: hsl(var(--clr-neutral-200));
    font-family: var(--ff-primary);
    line-height: 1.5;
}

.testimonial-grid {
    display: grid;
    width: min(95%,1120px);
    margin: auto;
    padding: 2rem 0;
    gap:1.5rem;
    /* mobile design */
    grid-template-areas: "one" "two" "three" "four" "five";
}

.bg-primary-400 {
    background-color: hsl(var(--clr-primary-400));
}

.bg-secondary-400 {
    background-color: hsl(var(--clr-secondary-400));
}
.bg-secondary-500 {
    background-color: hsl(var(--clr-secondary-500));
}

.bg-neutral-100 {
    background-color:hsl(var(--clr-neutral-100));

}
.text-neutral-100 {
    color: hsl(var(--clr-neutral-100));
}

.text-secondary-400 {
    color: hsl(var(--clr-secondary-400));

}

.flex {
    display: flex;
    gap:1rem;
}

.flow > *:not(:first-child) {
    margin-top: 1rem;
}

h2 {
    font-size: var(--fs-400);
}


.testimonial {
    font-size: var(--fs-400);
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 2.5rem 3.75rem 3rem -3rem hsl(var(--clr-secondary-400) / 0.25);
}
 


.testimonial .name {
    font-size: var(--fs-400);
    font-weight: var(--fw-500);
    line-height: 1;
}

.testimonial img {
    border-radius: 50%;
    width: 1.75rem;
    display: block;
}

.testimonial .position {
    opacity: 0.5;
    font-size: var(--fs-300);
}
.testimonial > p:first-of-type {
    font-size: var(--fs-500);
    line-height: 1.2;
}
.testimonial > p:last-of-type {
    opacity: 0.7;
}

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

.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:nth-child(5) {
    grid-area: five;
}
.testimonial:nth-child(4) img {
    border: 2px solid hsl(var(--clr-primary-400));
}
    


/* tablet design */
@media screen and (min-width:426px) {

    .testimonial-grid {
        grid-template-areas: "one one" "two five" "three five" "four four";
    }
}

/* desktop design */

@media screen and (min-width:1024px) {

    .testimonial-grid {
        grid-template-areas: "one one two five" "three four four five";
    }
}