@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');

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

:root{
    --violet: hsl(263, 55%, 52%);
    --dark-grayish-blue: hsl(217, 19%, 35%);
    --dark-blackish-blue: hsl(219, 29%, 14%);
    --white: hsl(0, 0%, 100%);
    --light-grey: hsl(0, 0%, 81%);
    --light-grayish-blue: hsl(210, 46%, 95%);
    --Grey-100: hsl(214, 17%, 92%);
    --Grey-400: hsl(224, 10%, 45%);

}

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

body{
    background-color: var(--light-grayish-blue);
    font-family: "Barlow Semi Condensed", sans-serif;
}

.testimonials-grid{
    max-width: 1440px;
    margin: 1rem;
    display: grid;
    grid-template-areas: 
    "item1 item1 item2 item3"
    "item4 item5 item5 item3";
    grid-auto-columns: 1fr;
    gap: 1.5rem;
}

.testimonials-grid .name{
    font-size: .7rem;
}


.testimonials-grid .item{
    padding: 2rem 2.65rem;
    border-radius: 0.5rem;
}

.testimonials-grid .item:nth-child(1){
    grid-area: item1;
    background-color: var(--violet);
    position: relative;
    background-image: url(../images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: 80% 0%;
}

.testimonials-grid .item:nth-child(2){
    grid-area: item2;
    background-color: var(--dark-grayish-blue);
}

.testimonials-grid .item:nth-child(3){
    grid-area: item3;
    background-color: var(--white);
}

.testimonials-grid .item:nth-child(4){
    grid-area: item4;
    background-color: var(--white);
}

.testimonials-grid .item:nth-child(5){
    grid-area: item5;
    background-color: var(--dark-blackish-blue);
}

.testimonials-grid .item:nth-child(1) .person,
.testimonials-grid .item:nth-child(1) .top-quote,
.testimonials-grid .item:nth-child(2) .person,
.testimonials-grid .item:nth-child(2) .top-quote,
.testimonials-grid .item:nth-child(5) .person,
.testimonials-grid .item:nth-child(5) .top-quote{
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--light-grey);
    position: relative;
    z-index: 5;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    
}

.testimonials-grid .item:nth-child(3) .person,
.testimonials-grid .item:nth-child(3) .top-quote{
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    color: var(--dark-grayish-blue);
    font-size: 1.2rem;
}

.testimonials-grid .item:nth-child(1) .person img,
.testimonials-grid .item:nth-child(2) .person img,
.testimonials-grid .item:nth-child(3) .person img,
.testimonials-grid .item:nth-child(4) .person img,
.testimonials-grid .item:nth-child(5) .person img{
    border-radius: 50%;
}

.testimonials-grid .item:nth-child(5) .person img{
    border: 3px solid rgb(118, 19, 164);
}

.testimonials-grid .item:nth-child(1) .person img{
    border: 3px solid rgb(186, 173, 186);
}



.testimonials-grid .item:nth-child(1) .bottom-quote,
.testimonials-grid .item:nth-child(2) .bottom-quote,
.testimonials-grid .item:nth-child(5) .bottom-quote
{
    color: var(--light-grey);
    margin-top: 1rem;
}

.testimonials-grid .item:nth-child(3) .bottom-quote,
.testimonials-grid .item:nth-child(4) .bottom-quote{
    color: var(--Grey-400);
}

.testimonials-grid .item:nth-child(1) .quote-icon{
    width: 130px;
    position: absolute;
    top: 0;
    right: 100px;
}






.testimonials-grid .item:nth-child(3) .top-quote,
.testimonials-grid .item:nth-child(4) .top-quote{
    align-items: center;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    color: var(--dark-grayish-blue);
   
}

.testimonials-grid .item:nth-child(3) .person,
.testimonials-grid .item:nth-child(4) .person{
    display: flex;
    align-items: center;
    gap: 1rem;
    z-index: 5;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    color: var(--Grey-400);
}











/* MEDIA QUERY */
@media(max-width:375px){

    .testimonials-grid{
        max-width: 375px;
        margin: 1rem;
        display: grid;
        grid-template-areas: 
        "item1"
        "item2"
        "item4"
        "item5" 
        "item3";
        grid-auto-columns: 1fr;
        gap: 1.5rem;
    }


    .testimonials-grid .item:nth-child(1) .person,
    .testimonials-grid .item:nth-child(1) .top-quote,
    .testimonials-grid .item:nth-child(2) .person,
    .testimonials-grid .item:nth-child(2) .top-quote,
    .testimonials-grid .item:nth-child(5) .person,
    .testimonials-grid .item:nth-child(5) .top-quote{
        display: flex;
        align-items: center;
        gap: 1rem;
        color: var(--white);
        position: relative;
        z-index: 5;
        margin-bottom: 1rem;
        font-size: 1.1rem;
        
    }

    .testimonials-grid .name{
        font-size: .5rem;
    }

    .testimonials-grid .name p{
        font-size: .7rem;
    }

    .testimonials-grid .item:nth-child(1) .person img,
    .testimonials-grid .item:nth-child(2) .person img,
    .testimonials-grid .item:nth-child(3) .person img,
    .testimonials-grid .item:nth-child(4) .person img,
    .testimonials-grid .item:nth-child(5) .person img{
        width: 40px;
    }

    
    
}