*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Verdana, Geneva, Tahoma, sans-serif;

}
body{
    display: flex;
    justify-content: center;
    align-self: center;
    min-height: 100vh;
    background: rgba(76,76,76,1);
}

.container{
    position: relative;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-rows: minmax(100px, auto);
    margin: 40px;
    grid-auto-flow: dense;
    grid-gap: 10px;
}
.container .box{
    background: #333;
    padding: 20px;
    display: grid;
    font-size: 15px;
    place-items: center;
    text-align: center;
    color: #fff;
    transition: 0.5s;
}
.container .box:hover{
    background: #1eb2a6;
}

.container .box img{
    position: relative;
    max-width: 200px;
    margin-bottom: 10px;

}
.container .box:nth-child(1){
    grid-column: span 2;
    grid-row: span 1;
}
.container .box:nth-child(4){
    grid-column: span 2;
    grid-row: span 1;
}

.container .box:nth-child(5){
    grid-column: span 2;
    grid-row: span 1;
}
.container .box:nth-child(6){
    grid-column: span 4;
    grid-row: span 2;
}


@media (max-width: 991px){
.container{
  
    grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
    grid-template-rows: minmax(auto, auto);

}
.container .box{
    grid-column: unset !important;
    grid-row: unset !important;
}



}