*, *::after, *::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Barlow Semi Condensed", sans-serif;
    font-size: 13px;
    color: hsl(0, 0%, 100%);
}
.cards{
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding:2rem ;
    margin: 2.5rem 0;
}
.card{
    display: flex;
    flex-direction: column;
    background-color: rgb(151, 126, 199);
    padding: 2.2rem 2rem;
    border-radius: .5rem;
    gap: 1rem;
    box-shadow: 0px 14px 17px 6px hsl(0, 0%, 81%);
}
img{
    border-radius: 100%;
    border: 2px solid rgba(206, 201, 201,45%);
    width: 2.3rem;
    height: 2.3rem;
}
.row{
    display: flex;
    gap: 1rem;
    align-items: center;
    /* border: 1px solid red; */
}
.name{
    font-weight: 500;
    margin-bottom: .15rem;
    font-size: 12px;
}
.job{
    font-size: 10.5px;
}
.bold{
    font-size: 1.2rem;
    font-weight: 500;
}
.non-bold{
    line-height: 1.2rem;
}
.card1{
    background-color: hsl(263, 55%, 52%);
}
.card1  .non-bold{
    color: hsl(260, 100%, 95%);
}
.card1 .job {
    color: hsl(264, 82%, 80%);
}
.card2{
    background-color: hsl(217, 19%, 35%);
}
.card2  .non-bold{
    color: hsl(214, 17%, 92%);
}
.card2 .job{
    color: hsl(0, 0%, 81%);
}

.card3{
    background-color:hsl(0, 0%, 100%) ;
    color: hsl(217, 19%, 35%);
}
.card3  .non-bold{
    color: hsl(217, 19%, 35%);
}
.card3 .job{
    color: hsl(224, 10%, 45%);
}

.card4{
    background-color: hsl(219, 29%, 14%);
    color: hsl(0, 0%, 81%);
}


.card5{
    background-color:hsl(0, 0%, 100%) ;
    color: hsl(217, 19%, 35%);
}
.card5  .non-bold{
    color: hsl(217, 19%, 35%);
}
.card5 .job{
    color: hsl(224, 10%, 45%);
}


@media (min-width:50em) {
    .cards{
        width: 88%;
        margin: auto;
        box-sizing: border-box;
        display: grid;
        gap: 1.5rem;
        grid-template-columns:repeat(4, 1fr) ;
    }
    .card1{
        grid-column: span 2;
    }
    .card4{
        grid-column: span 2;
    }
    .card5{
        grid-column: 4;
        grid-row: 1/ span 2;
    }
}