How to change the colour of product image arrows

Hi there,

I'm hopefully after one of the below two options for images of my products:

1. Having the layout of multiple product images displayed at a glance so the user can see all product images at once and select which image they wish to view. This seems to be available in desktop view, but not mobile. I'd like this available in mobile view if possible as well, see example in attached "Photo 1".
2. If the above option is not possible, changing the colour of the 'next/previous' image navigation arrows to something that stands out a bit more, as the default black colour is almost invisible against all of my product images. See attached "Photo 2".

Site URL: https://bird-krill-4x9n.squarespace.com/config/

Password: mrhunnehs

Any/all help or advice, or custom CSS suggestions, are much appreciated!

You can add this code to Website Tools (under Not Linked) > Custom CSS

.ProductItem-gallery-current-slide-indicator.enable-on-first-image-load.enabled {
    color: white !important;
    display: block !important;
}
.ProductItem .product-item-gallery-carousel-control::after {
    border-color: white !important;
}