@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@500;600&display=swap');

:root{
   --Moderate-violet: hsl(263, 55%, 52%);
    --Very-dark-grayish-blue: hsl(217, 19%, 35%);
    --Very-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;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0 auto;
    background-color: var(--Light-grayish-blue);
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-size: 13px;
}

.testimonial-grid{
    max-width: 1080px;
}
.cards{
    display: grid;
    gap: 1.55rem;
    grid-template-rows: auto;
    grid-template-columns: repeat(4, 1FR);
    grid-template-areas: 'grid1 grid1 grid2 grid3'
    'grid4 grid5 grid5 grid3';

}

.image{
    margin-right: 10px;
}

.image img{
    border-radius: 50px;
    border-style: solid;
    border-width: 2px;
    /* height: 35px; */
    width: 35px;
}


.card{
    display: flex;
    align-items: center;
}

.testimonial{
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    /* padding: 20px; */
    color: var(--White);
    row-gap:15px;
    /* height: 100%; */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    padding:28.5px;
    
}

.name{
    font-size: 15px;
    font-weight: 500;
}

.post{
    font-size: 13px;
    font-weight: 500px;
    opacity: 0.5;
}
.daniel-testimonial{
    background-color: var(--Moderate-violet);
    background-image: url('images/bg-pattern-quotation.svg');
    background-repeat: no-repeat;
    background-position: 80% 0% ;
    grid-area: grid1;
}

.jonathan-testimonial{
    background-color: var(--Very-dark-grayish-blue);
    grid-area: grid2;
}

.jeanette-testimonial{
    background-color: var(--White);
    color: var(--Very-dark-grayish-blue);
    grid-area: grid4;
}

.patrick-testimonial{
    background-color: var(--Very-dark-blackish-blue);
    grid-area: grid5;
}

.kira-testimonial{
    background-color: var(--White);
    color: var(--Very-dark-grayish-blue);
    grid-area: grid3;
}

.sub-heading{
    font-weight: 600;
    font-size: 20px;
}

.feedback{
    opacity: 0.7;
    font-size: 13px;
    line-height: 1.4;
}

.kira-testimonial .feedback{
    margin-top: 5px;
}

.daniel-testimonial img{
    border-color:  hsl(263, 69%, 69%);;
}

.jonathan-testimonial img{
    border-color:  var(--Very-dark-grayish-blue);
}

.kira-testimonial img{
    border-color: hsl(217, 19%, 35%);
}

.patrick-testimonial img{
    border-color: var(--Moderate-violet);
}

.jeanette-testimonial img{
    border-color: var(--White);
}
footer{
    display:block;
    position: fixed;
    bottom: 1%;
    font-size: 20px;
    
}

a{
    text-decoration: none;
}

a:hover{
    color: var(--Moderate-violet)
}

@media only screen and (max-width: 768px) {
    .cards{
        display: flex;
        flex-direction: column;
        margin: 50px 20px;
    }
}