Adjust video size mobile view only

Hi,

We would like to have a different view for the mobile version of a specific section of our website.

On desktop the videos are nicely displayed next to each other (see attached screenshot). However on mobile it automatically puts the videos below each other and since the videos are vertical it makes the mobile view quite long. Is there a way with custom css code to have two videos display next to each other and maybe a little bit smaller?

All the current CSS that we already have on the website which need to stay in place and not to be interfered with:

#block-af4b7ba7d1d8d5be55d7.video-block .video-player{
padding-bottom:115%
}

#block-549ee300e93907528e50.video-block .video-player{
padding-bottom:115%
}

#block-d47b6759b132bebbae41.video-block .video-player{
padding-bottom:115%
}

#block-658a941acddc463a4e77.video-block .video-player{
padding-bottom:115%
}

Hope anyone can help!

Can you share your website URL and this page?

33 minutes ago, Ziggy said:

Can you share your website URL and this page?

Yes of course! It's on the homepage:

https://www.studiosophiehospes.com

17 minutes ago, Ziggy said:

You can adjust the mobile layout to put the images in a 2x2 grid in the same way that you edit the mobile view of every page. 

You are totally right, I thought because they are video containers I could not resize them in mobile. Thanks for the solution!