Videos & Images The Exact Height of Sections - Clean Up Gaps?

Is there any way to size images and videos to be the exact height of a section? I'm trying to make the website look cleaner and more responsive by removing the gaps between the content and the edge of its respective section. 

I input some custom code I found on the forums to re-size videos, however, I'm still getting gaps between sections.  Especially across browsers and device sizes. I've attached screenshots below. 

Website link: https://mj-photo.squarespace.com/ Password: Madeline

The issue is very noticeable among images and videos on the home page. 

Any insight is appreciated!! 

With Campaign 360 section, try adding this to Design > Custom CSS

.fe-642aee39d8daa5103bf5a3fd {
	row-gap: 0 !important;
}

@tuanphan Thank you! That helped the video from re-sizing in on different browsers and device sizes however there is still a small gap below the video. Any ideas on how to remove this? I tried to play around with fluid engine spacing but it would not work. 

@VisualNotes Thank you! That worked perfectly. I now only have a slight gap below the video but I believe that will be a custom CSS fix. 

Upon further investigation, I saw that the reason for the remaining gap below the video is an inline style that SQ puts in here which is inexplicable to me. 
It even needs the !important property for the custom CSS rule to eliminate the issue:

.embed-block-wrapper {padding-bottom: 0 !important;}

Which btw doesn't mean that a gap doesn't come back on tablet width...
I'm experiencing still a small gap on screen sizes between 768px and 1500px

This is where my love for Squarespace is severely tested...