How to Stack a Grid Gallery in Squarespace Mobile View

Followed this website in order to try and achieve stacking on Mobile only using one column, as it currently shows two columns, reducing the image sizes (see attachment):

https://christyprice.com/blog/stack-grid-gallery-squarespace-mobile

The following code is used but i cannot get it working when i drop it onto my Design >> Custom CSS section:

@media screen and (max-width:800px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(1,1fr) !important;
      grid-row-gap: 3vw !important;
}
}

Can Someone please help me as I want each image to appear on one big column instead of split into two coloumns for mobile only.

Managed to get it working but wondering how I can get it to take the full size of each image instead of square with padding. example attached of what i would like it to look like.

What is your site url? We can help easier