*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.body {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: rgb(247, 247, 247);
    font-size: 16px;
    color: rgb(113, 114, 114);
    line-height: 1.5;
}

.container {
            background-color: rgb(217, 218, 222);
            max-width: 1000px;
            margin: 50px auto;
            padding: 5px;
            display: grid;
            grid-template-columns: repeat (5 1fr);
            grid-template-rows: minmax(100px, auto);
            /*grid-template-rows: 1fr 1fr 1fr;*/
            gap: 10px;
            /*justify-content: center;
            align-items: center; */         
}
.item {
    color: aliceblue;
    background-color: rgb(80, 80, 245);
   /* border:1px solid rgb(217, 229, 235);*/
    padding:20px;
    /*justify-content: center
    align-items: center*/
    border-radius: 5px;
}
@media screen and (max-width: 700px){
    .container{
        grid-template-columns: 1fr 1fr;
    }
}
@media screen and (max-width: 500px){
    .container{
         grid-template-columns:  1fr;
    }
}
.head {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.head img {
    width: 10%;
    height: 30%;
    border-radius: 100%;
    margin-right: 10px;
}
.message {
    margin-top: 10px;
}
h6 {
    font-size: 9px;
    line-height: 1.5;
}
.item:nth-of-type(1) {
    grid-column: 1 / span 2;
    grid-row: 1 / span 3; 
    background-color: blueviolet;
    padding: 10px;
    
}

.item:nth-of-type(2) {
    grid-column: 3;
    grid-row: 1 / span 3;   
    height: 250px 
    background-color: #333;
}

.item:nth-of-type(3) {
    grid-column: 4 / span 2;
    grid-row: 1 / span 6; 
    background-color: #f8f7f7;
    color: black;
}
.item:nth-of-type(4) {
   grid-column: 1;
   grid-row: 4 / span 3; 
   color: black;
   background-color: #fff

} 

.item:nth-of-type(5) {
   grid-column: 2 / span 2;
   grid-row: 4 / span 3; 
   background-color: black;
}