Customize Blog Page Pagination Arrows

I currently have custom arrows (png files I added to my site) for my older and newer blog posts. I used the following code to achieve this:

/*Custom Pagination Arrows*/
.item-pagination-icon svg {
  visibility: hidden;
}
.item-pagination-icon {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
/*url icon for next button*/
.item-pagination-link--next .item-pagination-icon {
  background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e91023a01fce319f721639/1709772835846/right-arrow+%281%29.png');
}
/*url icon for previous button*/
.item-pagination-link--prev .item-pagination-icon {
  background-image: url('https://static1.squarespace.com/static/6349d4f46e56b442e4aa8da4/t/65e9101c0f705c3fad22c824/1709772828912/left-arrow.png');
}

This works perfectly, but I am trying to create the same effect on my main blog page.  Any help would be much appreciated. 

Can you share link to main blog page? We can check easier

https://round-magnolia-te9g.squarespace.com/config/

the password is roundmagnolia.