3 Images next to each other on desktop // mobile only 2 and one big

Hello I have the following problem.

In my blog articles (https://www.laila-schreibt.com/blog/mondgenuss-marbachegg) I always show 3 images in a row / next to eachother. But on mobile it looks not good, because then there are 2 images on the top, and one down on the left side. I dont like the huge white space that's created. Is there a way to customize CSS - so when I have 3 images next to each other, in the mobile version there will be 2 images on the top and the third image is big and aligned under the two images.

It would be great if I can do this once for the whole website, and not for every block...

Thank you so much!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
[class*="type-blog"] .slide {
    width: 33.333% !important;
}
}

Thank you! Now all three pictures are next to each other. This works, but it affects of course the landscape pictures too (see annex 1). And they're now to tiny. Is there a way to say in CSS, that 2 of the 3 vertical pictures are next to each other and the third one is displayed full frame under the 2 pictures? 🙂 (see annex 2).

Thank youuu

Use this new code if you want to affect 1 gallery block only

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1678024661584_6364 .slide {
    width: 33.333% !important;
}
}

thank you! There is no way to do this in general? Otherwise I have to do it for every block separately 🙂

No way. Use first code to target all, or second code to target specific block