stacking images for pc, tablet and mobile

Site URL: https://www.belmontaccommodates.com/

Hi again. Could anyone help with this issue for me. On my website I have on homepage 4 inline images which look great on desktop, but not that great on tablet or mobile. I'd like if possible to use media queries to get them to form a 2x2 grid on tablet. At the moment when you resize the browser it goes straight from a 1 x 4 grid to images stacked on top of each other. 

Appreciate you clever people taking the time to look at this!

https://www.belmontaccommodates.com/

Thanks

Steve

I've sort of come up with some css that works, but not brilliantly. Can anyone make this work better? Would really appreciate the advice.  Would be useful to know what width the breakpoint is in 7.1 for mobile. 

Thanks everyone!

@media only screen and (min-width: 700px) and (max-width: 1000px) {
.col.sqs-col-3.span-3
{
  width:50% !important;  
  }
}

@media only screen  and (max-width: 700px) {
.sqs-block-image {
width: 85%;
margin: 0 auto;
}
}

Add to Design > Custom CSS

/* Images on mobile - tablet */
@media screen and (max-width:991px) {
div#page-section-6217c7fb22a2d728c33ac28e .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-6217c7fb22a2d728c33ac28e .span-3:nth-child(2n+1) {
    clear: left !important;
}
}