.container{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 10px;
}
.box{
    height: 300px;
    width: 200%;
    align-content: center;
    text-align: center;
}
@media  (min-width:0px) and (max-width:600px){
.container{
    display: grid;
    grid-template-columns: 1fr 1fr;

}
.h1{
    display: flex;
    justify-content: left;
}
 .box{
    box-shadow: 0 0 10px yellow;
    border: red solid 2px;
    width: 150px;
    height: 100px;

 }
}

    @media  (min-width:601px) and (max-width:768px){
.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    /* gap: 10px; */
}
.h1{
    display: flex;
    justify-content: center;
}
.box{
    box-shadow: 0 0 10px rgb(0, 255, 26);
    border: rgb(219, 242, 115) solid 2px;
    width: 150px;
    height: 100px;

 }
}
@media  (min-width:769px) and (max-width:1400px){

.container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    /* gap: 10px; */
}
.h1{
    display: flex;
    justify-content:right ;
}
.box{
    box-shadow: 0 0 10px rgb(121, 42, 247);
    border: rgb(79, 235, 191) solid 2px;
    width: 150px;
    height: 100px;

 }


}