Make first image in Image Gallery Block go full width

Hi all,

I'm wondering if you could help me with some css that would force the first image in a gallery block to display the full width of the block?  Ideally, this would be for any gallery block that is placed in this "Portfolio" blog collection.

(I know I could simply put a regular image block on top of the gallery block to create this, but I want to keep all of the images in the gallery block so that you can page through them while in lightbox mode.)

Website: https://pumpkin-orange-3ld6.squarespace.com/portfolio/blog-post-title-one-2g2bd-5723b-4hfd4
Password: Real2023

Thank you!

Add to Page Header

<style>
  body[class*="type-blog"].view-item div.gallery-block .slide:first-child {
    width: 100% !important;
}
</style>

Thanks so much @tuanphan.  This almost works perfectly!  I've attached a screenshot - it looks like it's not treating the second image as being on a new row, so the third image isn't flowing behind it.  Am wondering if there is a way for it to recognize that the second image is its own row and the third image should be flowing behind it?  Let me know what you think.

Thanks so much @tuanphan!  Yes, I'm using the same grid settings for each page, so this works beautifully.  Can't thank you enough!