List / Testimonial Arrow Image Not Showing On Mobile

I've put in custom CSS to change out the left and right arrows for the list section of my site that I'm using as testimonials, but when I switch the mobile screen the images are not displayed - instead it shows the standard ones. I can't find the right identifier to add additional CSS to make this change. Any help is appreciated:

website: www.luckydogmobilegroomers.com - it's under the "If Dogs Could Talk" section:

[data-section-id="6408136c67a6c3470fdc2532"] {
svg.user-items-list-carousel__arrow-icon {
    display: none !important;
}
.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://images.squarespace-cdn.com/content/v1/63f5157592478e6d25224db2/837acc5c-0c8d-475e-9193-e13ec2023aab/leftarrow.png?format=300w);
    background-size: contain;
    background-repeat:no-repeat;
    background-position: center center;
}
button[class*="--right"] .user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-image: url(https://images.squarespace-cdn.com/content/v1/63f5157592478e6d25224db2/bbf291a2-7b1e-4f94-8a42-1b6cd6b38c99/rightarrow.png?format=300w);
}}

.user-items-list-carousel__arrow-icon-background.user-items-list-carousel__arrow-icon-background-area {
    background-color: transparent !important;
}

Hi,

What is site url?

Mobile arrow use a different class name so you will need a new code