*{
    margin: 0;
    padding: 0;
}
body{
    overflow: hidden;
}
.title{
    text-align: center;
    line-height: 30px;
    padding-top: 10px;
    padding-bottom: 3px;
    margin-bottom: 30px;
    position: relative;
}
 .title::after{
    content: " ";
    width: 120px;
    margin-top: 30px;
    padding-top: 10px;
    margin-left: -200px;
    border-bottom: 2px solid black;
    position: absolute;
    
    

 }
.container{
    width:100%;
   height:87vh;
   display: grid;
   grid-template-columns: [colo-start]  1fr [col-2] 1fr [col-3] 1fr [col-end];
    grid-template-rows:120px 250px 50px; 
    grid-template-areas: 
    "y y y"
    "r r p"
    "b b b ";
     grid-gap: 30px;  
     padding-left: 10px;
     padding-top:20px;
}

 .yellow, .blue, .pink,.red {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: radial-gradient(rgb(36, 195, 73),rgb(245, 245, 38));
    color: whitesmoke;
    font-weight: 100;
    font-size: 20px;  
    word-spacing: 10px;
    margin-right: 35px;
    margin-left: 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: .5s eases;
}


.yellow{
    grid-area: y;
    align-items: center;
    padding: 20px;
    
}
.item:hover {
    box-shadow:0px 0px 20px 13px gray;
}
.red{
    grid-area: r;
    margin-right: 0;
    margin-left: 50px;
    padding: 20px;
}
.pink{
    padding: 10px;
}
.blue{
    grid-area: b;
    place-self: start;
    border-radius: 0;
    padding: 20px 40px;
    margin-top: 30px;
    margin-left: 50px;
   border-bottom-left-radius: 22px;
   border-top-right-radius: 22px;
   box-shadow: 0px 13px 0px 0px black;
   transition: .5s ease;
}
.items:hover{
    box-shadow: none;
}
/* tablet  design*/
@media (max-width:768px) {
   
    .container{
        overflow-x: hidden;
        grid-template-columns: [colo-start]  1fr [col-2] 1fr [col-3] 1fr [col-end];
        grid-template-rows:auto  auto  50px;  
        grid-template-areas: 
        "y y p"
        "r r p"
        "b b b ";
    } 
    .yellow{
        grid-area: y;
        margin-right: 0;
       align-items: flex-start;
    }
    .pink{
        grid-area: p;
    }
    .red{
        grid-area: r;
        margin-left: 10px;
    }
    .blue{
    grid-area: b;
     margin-left: 10px;
     margin-top: -10px;
     padding: 20px 40px;
    }
}
/* Mobilephone Design */
@media (max-width:500px) {
    *{
     margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    .title::after{
        padding-top: 0px;
    }
    .container{
        width: auto;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 230px 230px 230px 50px ;
        grid-gap: 15px;
    } 

    .yellow{
        grid-column: 1 / span2;
        margin-left: 0;
    }
   .red{
    grid-column: 1 /span 5;
     margin-left: 0;
   }
   .pink{
    grid-column: 1 / span 7;
    grid-row: 3;
    margin-left: 0;
   }
   .blue{
    grid-row: 4;
   }
}