:root{
    /* Primary */

--Purple-50: hsl(260, 100%, 95%);
--Purple-300: hsl(264, 82%, 80%);
--Purple-500: hsl(263, 55%, 52%);



 /* Neutral */

--White: hsl(0, 0%, 100%);
--Grey-100: hsl(214, 17%, 92%);
--Grey-200: hsl(0, 0%, 81%);
--Grey-400: #676d7e;
--Grey-500: #48556a;
--Dark-blue: hsl(219, 29%, 14%);
--Black: hsl(0, 0%, 7%);
--font-family:"Barlow Semi Condensed","Open Sans",sans-serif;
}

.contanir{
    width: 96%;
    height: fit-content;
    background-color: var(--Grey-100);
    margin: auto;
    padding: 20px;
    padding-top: 50px;
    display: grid;
    grid-template-columns: repeat(9,1fr);
    grid-template-rows: repeat(9,1fr);
}

/* card edit */
.card{
      margin: 15px;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px;
      padding: 25px 30px 25px 25px;
      font-family: var(--font-family);
      box-shadow: 6px 6px 60px -20px var(--Dark-blue);
}

.card .totle{
width: 100%;
display: flex;
align-items: center;
}

.card .totle img{
    width: 40px;
    height:40px;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}
.card .totle .title{
margin-left: 10px;
}

.card .totle .title p{
    margin: 0;
}

.card .totle .title span{
    font-size: 12px;
    opacity: .7;
}

.card>p{
    font-size: 24px;
    margin:8px 0  8px 0;
    font-weight: 600;
    
}
.card>span{
    font-size: 16px;
    opacity: .9;
}


.card-1 .totle .title p ,.card-1 .totle .title span , .card-1>p ,.card-1>span
,.card-2 .totle .title p ,.card-2 .totle .title span , .card-2>p ,.card-2>span
,.card-4 .totle .title p ,.card-4 .totle .title span , .card-4>p ,.card-4>span
{
    color: var(--Grey-100);
}
.card-3 .totle .title p ,.card-3 .totle .title span , .card-3>p ,.card-3>span
,.card-5 .totle .title p ,.card-5 .totle .title span , .card-5>p ,.card-5>span
{
    color: var(--Grey-500);
}



















/* card-1 edit */
.card-1{
    background-color: var(--Purple-500);
    grid-column: 1/6;
    grid-row: 1/5;
    position: relative;
    z-index: 1;
}
.card-1::after{
    width: 100%;
    height: 100%;
    content: url(bg-pattern-quotation.svg);
    position: absolute;
    right: -75%;
    top: 0;
    z-index: -1;
}
.card-1 .totle>img{
    border: 3px solid var(--Purple-300);
}






/* card-2 edit */
.card-2{
    background-color: var(--Grey-500);
grid-column: 6/8;
grid-row: 1/5;
}






/* card-3 edit */
.card-3
{
    background-color: var(--White);
    grid-column: 1/3;
    grid-row: 5/9;
}



/* card-4 edit */
.card-4{
    background-color: var(--Dark-blue);
    grid-column:3/8 ;
    grid-row: 5/9;
}
.card-4 .totle>img{
    border: 3px solid var(--Purple-500);
}


/* card-5 edit */
.card-5{
    background-color: var(--White);
    grid-column: 8/10;
    grid-row: 1/9;
}



/* media */

@media(max-width:380px){
.contanir{
    width: 100%;
    margin: 0;
    height: fit-content;
    padding: 10px 0 10px 0;
    grid-template-rows: revert;
}
.card{
    height: fit-content;
        margin-bottom: 20px;
}
.card-1{
    grid-column: 1/10;
    grid-row: 1/1;
}
.card-1::after{
    display: none;
}
.card-2{
    grid-column: 1/10;
    grid-row: 2/2;
}
.card-3{
    grid-column: 1/10;
    grid-row: 3/3;
}
.card-4{
    grid-column: 1/10;
    grid-row: 4/4;
}
.card-5{
    grid-column: 1/10;
    grid-row: 5/5;
}
}