Remove text box hover overlay on mobile view

I have a colored text box overlay that appears on hover over the images on my homepage. I want these to disappear on mobile, but I can't figure out the code. The code I'm using for each text box hover is below, I'm not sure why the min-width:767px isn't working.

Site is https://www.juliaalberts.com/

Quote

 

@media only screen and (min-width: 767px){

#block-a28c8ca60649de165aa8 {

opacity: 0;

 transition: opacity 1s

}

#block-a28c8ca60649de165aa8:hover {

opacity: 1;

transition: opacity .3s

}

}

#block-a28c8ca60649de165aa8 {

   cursor: pointer;

}

#block-a28c8ca60649de165aa8 a {

   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;

   display: flex;

   align-items: center;

   justify-content: center;

   text-decoration: none;

}

 

Thank you so much, this worked perfectly!