Hover gallery

Site URL: https://chimes-bronze-p5sm.squarespace.com

Hi, can someone please help me with coding? I´m new to this, so maybe I´ve done something wrong. The hover effect on the gallery works perfectly with the color change (from color til grey), but the text seems to be delayed. Why?

I would like the text to show up at the same time as the color change. I´ve used this code: 

<style>

 .gallery-caption p{color:white!important}

.gallery-caption p{text-align:center} 
.gallery-caption p{font-size:2rem!important}

.gallery-masonry-item img:hover{filter:grayscale(100%)!important}

.gallery-caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)}

.gallery-caption {opacity:0!important; transition-duration:0s}

.gallery-masonry-item:hover .gallery-caption {opacity:1!important; transition-duration:0s}
  
    .gallery-caption {
    pointer-events: none;
}

</style>

And one other thing; I would like to use this code only for desktop. How to I stop it from showing om mobile? 

Password: 1234

Thank you!