: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: hwb(0 81% 19%);
    --Light-grayish-blue: hsl(210, 46%, 95%);
}
*{
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    align-content: center;
    height: 100vh;
    background-color: var(--Light-grayish-blue);
    font-size: 13px;
    font-family: "Barlow Semi Condensed", serif;
    margin: 0;
    padding: 0;
}
main{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: repeat(2,1fr);
    gap: 30px;
    width: 1200px;
    height: 600px;
    margin-bottom: 32px;
}
.per-1{
    grid-area:1/1/2/3 ;
    background-color: var(--Moderate-violet);
    background-image: url(images/bg-pattern-quotation.svg);
    background-repeat: no-repeat;
    background-position: top right 18%;
    
}
.per-2{
    grid-area: 1/3/2/4;
    background-color: var(--Very-dark-grayish-blue);
}
.per-3{
    grid-area: 2/1/3/2;
    background-color: var(--White);

}
.per-4{
    grid-area: 2/2/3/4;
    background-color: var(--Very-dark-blackish-blue);
}
.per-5{
    grid-area: 1/4/3/5;
    background-color: var(--White);
}
.per-1,
.per-2,
.per-3,
.per-4,
.per-5{
    padding: 30px;
    border-radius: 8px;
}
.name-img{
    display: flex;
    align-items: center;
    gap: 20px;
}
img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
}
.p1,
.p3,
.p7{
    font-size: 22px;
    color: var(--White);
}
.p9,
.p5{
    font-size: 22px;
    color: var(--Very-dark-grayish-blue);

}
.per-1 h3,
.per-2 h3,
.per-4 h3{
    color: var(--Light-gray);
}
.per-1 .p,
.per-2 .p,
.per-4 .p{
    color: var(--Light-gray);
    opacity: 50%;
}
.per-1 .p2,
.per-2 .p4,
.per-4 .p8{
    color: var(--Light-gray);
    opacity: 70%;
}

.per-3 h3,
.per-5 h3{
    color: var(--Very-dark-grayish-blue);
}
.per-3 .p,
.per-5 .p{
    color: var(--Very-dark-grayish-blue);
    opacity: 50%;
}
.per-3 .p6,
.per-5 .p10{
    color: var(--Very-dark-grayish-blue);
    opacity: 70%;
}
.p1,
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8,
.p9,
.p10{
    margin-top: 16px;
    margin-bottom:16px ;
}
footer{
    margin-top: 20px;
}
@media (max-width: 400px) {
    main{
        grid-template-columns: repeat(1,1fr);
        grid-template-rows: repeat(5,1fr);
        max-width: 400px;
    }
    .per-1{
        grid-area:1/1/2/2 ;
        
    }
    .per-2{
        grid-area: 2/1/3/2;
 
    }
    .per-3{
        grid-area: 3/1/4/2;
      
    
    }
    .per-4{
        grid-area: 4/1/5/2;
        
    }
    .per-5{
        grid-area: 5/1/6/2;
        
    }
    footer{
        display: none;
    }
}