.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 rgb(193, 113, 178);
    border: rgb(8, 166, 229) 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(80, 108, 220);
    border: rgb(168, 57, 77) solid 2px;
    width: 150px;
    height: 100px;

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

.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(103, 175, 116);
    border: rgb(21, 121, 19) solid 2px;
    width: 150px;
    height: 100px;

 }


}