Adjusting mobile only section height after hiding image blocks

if you look at the dekstop version you'll notice 6 dark red gifs playing... but on mobile those stacked below the header info to make it way too long. So I used some code to hide the image blocks but it is not adjusting the height of the section to be more manageable... is there code to shrink the image blocks so that it would automatically shrink down the section and not be visible or is there a way to manually adjust the section height without causing weird spacing between the portfolio sub page links. ideally i'd like to have just one image block gif on mobile above the white arrow but am struggling to achieve that. i considered making a separate portfolio page completely for mobile only and having it hidden in desktop view and vice versa but i cant duplicate a portfolio page with the subpages so any other suggestions are welcome.

Website: jacqmay.design

current code:
 

@font-face {
font-family: 'lowdrag';
src: url("https://static1.squarespace.com/static/6080d4ac0d6b220f75b5799b/t/61947f4ad09296617535befb/1637121866720/Lowdrag-Extended.ttf");}

h1,a  {font-family: 'lowdrag';}

#collection-6080d4f4e432dc2f53a95e21 .header-announcement-bar-wrapper div, #collection-6080d8ed2cca634360104116 .header-announcement-bar-wrapper div,
#collection-6080d9d15ad31f2bee159c5c .header-announcement-bar-wrapper div
{background: #BA2226 !important;}

@media only screen and (max-width: 768px) {
 #block-yui_3_17_2_1_1669942605397_128786,  #block-yui_3_17_2_1_1669942605397_51361, #block-yui_3_17_2_1_1669942605397_138165, #block-yui_3_17_2_1_1669942605397_81807, #block-yui_3_17_2_1_1669942605397_17622, #block-yui_3_17_2_1_1669942605397_35425 {
   display: none;
 }
}

Hi,

You want to hide these icons + reduce section height on mobile?