@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%);
    --dark-grayish-blue: hsl(217, 19%, 35%);
    --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%);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:Barlow Semi Condensed, sans-serif;
}
body{
    width: 100%;
    height: 100%;
}
main{
    width: 100%;
    min-height: 100vh;
    background-color: var(--Light-grayish-blue);
    padding-block: 2.5rem;
    padding-inline: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container{
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    gap: 1.5rem;
}
.testimonial{
    width: 100%;
    /* max-width: 360px; */
    min-height: 250px;
    padding: 1.6rem 2.2rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    color: var(--Light-grayish-blue);
    border-radius: 8px;
    box-shadow: 12px 12px 20px -10px hsla(217, 19%, 35%, 0.2);
}
.testProfile{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}
.profileImg{
    width: 36px;
    height: 36px;
    object-fit: cover;
    object-position: center;
    border-radius: 50%;
    border: 2px solid transparent;
}
.desc h3{
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 0.8;
}
.desc span{
    font-size: 0.7rem;
    font-weight: 500;
    color: hsla(0, 0%, 100%, 0.5);
}
.bold{
    font-size: 1.2rem;
    line-height: 1.3;
    font-weight: 500;
}

.review{
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3;
    color: hsla(210, 46%, 95%,0.7);
}

.testimonial1{
    background: url(./images/bg-pattern-quotation.svg) no-repeat var(--Moderate-violet);
    background-position: top right 10%;
}
.testimonial2{
    background-color: var(--dark-grayish-blue);
}
.testimonial3{
    background-color: var(--White);
}
.testimonial4{
    background-color: var(--dark-blackish-blue);
}
.testimonial5{
    background-color: var(--White);
}

.testimonial3 h3,
 .testimonial5 h3{
    color: var(--dark-grayish-blue);
    font-weight: 600;
}
.testimonial3 span,
 .testimonial5 span{
    color:hsla(217, 19%, 35%, 0.5) ;
    font-weight: 600;
}
.testimonial3 .bold,
 .testimonial5 .bold{
    color: var(--dark-grayish-blue);
    font-weight: 600;
}
.testimonial3 .review,
.testimonial5 .review{
    color:hsla(217, 19%, 35%, 0.7);
}

.testimonial4 .profileImg{
    border-color: var(--Moderate-violet);
}
@media (min-width:600px) {
    .container{
        max-width: 700px;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        align-items: stretch;
    }
    .testimonial1{
        grid-column: span 2;
    }
    .testimonial3{
        grid-row: 3/4;
        grid-column:1;
    }
    .testimonial4{
        grid-row: span 2;
        /* grid-column: 2 / 3; */
    }
    .testimonial5{
        grid-column: span 2;
    }
}

@media (min-width:1120px) {
    .container{
        max-width: 1200px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: 300px 300px;
        /* align-items: stretch; */
    }
    .testimonial{
        min-height: 300px;
    }
    .testimonial1{
        grid-column: span 2;
    }
    .testimonial3{
        grid-row: 2 / 3;
    }
    .testimonial4{
        grid-row: 2 / 3;
        grid-column: 2/4;
    }
    .testimonial5{
        grid-column: 4 / 5;
        grid-row: span 2;
    }
}