How to edit elements inside an Index Page

Site URL: https://www.paoduran.com/santa-sled

Hi, I am really struggling getting my head around how to arrange and edit elements inside an Index Page. 

I  am trying to create a portfolio type of page for my work. I do both sound and visual design, so I want to divide my page into two different sections (Audio and Visual). 

I am using York Template (https://octahedron-seadragon-cfxh.squarespace.com/config/pages), as I love the example page, but I am struggling doing my own in a similar way...

So for example, in one of the Index pages I am using (https://www.paoduran.com/santa-sled) I would like to be able of resizing images and videos, and controlling the spacing between elements (so how much negative space there is between each video or image). But I am getting no control over any of this.

I am also having trouble with the main Index Page (https://blenny-panda-mngf.squarespace.com/config/pages) as I get thse coloured backgrounds for each project. Is there a way of making the images match the size of each section? Or at least control that background colour? 

Maybe I should have gone for a different web style? I just want a web I that can have a main page where you can go to the audio or visual pages, and have each one as some sort of portfolio

Best regards and sorry for the long post !

Oh yeah! Also when scrolling down the page, in the York template the images don't appear, they are already there. I don't like the effect I am getting on mine, where whenever I scroll down it seems to reveal each new image.