Squarespace 7.1 Gallery Reel Arrow Buttons not changing with CSS

Site URL: https://beige-guitar-h4be.squarespace.com/

I am using this CSS: 

.sqs-gallery-block-slideshow .sqs-gallery-controls .next,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous {
  background: none; 
}
.sqs-gallery-block-slideshow .sqs-gallery-controls .next::before,
.sqs-gallery-block-slideshow .sqs-gallery-controls .previous::before {
  background: white;
  color: black;
  font-size: 1.1em; 
  padding: 13px;
  border-radius: 50%; 

but nothing is changing on the arrows. I am unsure what is happening but any edits to my css are not populating. 

My site is not live, but under construction. 

Thank you in advance! 

Above code is arrow in Gallery Block.

With gallery reel, it requires to use a different code.

What do you want to do? We can help easier