.mosaic{
    display:grid;
    margin:auto;
    /* grid-template-columns: max-content max-content max-content max-content; */
    grid-template-columns:repeat(3, 30%);
    column-gap:30px;
    justify-content: center;
    min-height:90vh;
    height:auto;
    align-items: start;
    /* border:1px solid black; */
}
.box{
    position:relative;
    display:block;
    /* width:22vw; */
    width: 30vw;
}
.box img{
    width: 100%;
    border-radius: 5px;
}
@media(max-width:1296px){
    .mosaic{
        grid-template-columns:repeat(3, 30%);
        column-gap:2rem;
    }
    .box{
        width:30vw;
    }
}
@media (max-width:768px){
    .mosiac{
        grid-template-columns:repeat(2, 46%);
        column-gap:1rem;
    }
    .box{
        width:46vw;
    }
}
@media (max-width:600px){
    .mosaic{
        grid-template-columns:repeat(2, 46%);
        column-gap:1rem;
    }
    .box{
        width:46vw;
    }
}

.box{
    border-radius:10px;
}