img{
    width: 100%;
    height: 100%;
}
.row{
    height: 400px;
    display: flex;
    gap: 5px;
    margin: 5px;
}
.row > div{
    flex: 1;
}
.vertical-collage img{
    height: 50%;
    height: calc((100% - 5px)/2);
}
.square-collage{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 5px;
}

/* Responsive Media Query */
@media screen and (max-width:576px) {
    .row{
        flex-direction: column;
        height: auto;
    }
    .square-collage{
        grid-template-columns: 1fr;
    }
}

/* Responsive medium device */

@media screen and (min-width: 576px) and (max-width: 992px) {
    .row{
        flex-direction: column;
        height: auto;
    }    
}