design.css

body{
    font-weight:500, 600 ;
    font-size: 13px;
    font-family:Barlow Semi Condensed;
    background-color: azure;
   height: 100vh;
   display: flex;
   justify-content: center;

}
h3 {
    color: brown;
}
.container{
    display: grid;
    gap: 0.5em;
    border-radius: 50px
    grid-template-columns:1fr 1fr 1fr 1fr;
    grid-template-areas: "person1 person1 person2 person5"
    "person3 person4 person4 person5";
    width: 70%;
    height: 50vh;
    margin-top: 100px;
    margin-bottom: 100px;

}
.box{
    display: flex;
border-radius: 50px;


}
.box2{
    display: block;
    font-size: 10px;
}
h1{
    margin-top: 0;
    margin-bottom: 0;
}
h2{
    margin-top: 0;
    margin-bottom: 0;
}
img{
    border-radius: 50%;
}

.person5{
    display: grid;
    grid-area: person5;
    grid-template-columns: auto;
    padding: 2em;
    line-height: 1.5;
    background-color: hsl(210, 46%, 95%);
    border-radius: 5px;
    padding: 10px 20px;
    color: gray;
}
.person1{
grid-area: person1;
background-color: hsl(253, 42%, 45%) ;
border-radius: 5px;
padding: 10px 20px;
color: white;

}
.person2{
    grid-area: person2;
    background-color:hsl(217, 19%, 35%) ;
    border-radius: 5px;
    padding: 10px 10px;
    color: white;

}
.person3{
    grid-area: person3;
    background-color:hsl(0, 0%, 100%) ;
    border-radius: 5px;
    padding: 10px 20px;
    color: gray;

}
.person4{
    grid-area: person4;
    background-color:  hsl(219, 29%, 14%);
    border-radius: 5px;
padding: 10px 20px;
color: white;

}
.position{
    position: absolute;
    top: 50%;
right: 0;
}