How to remove the hover function in a gallery caption on mobile?

Site URL: https://www.bretmeraki.com

I have made it so that my gallery caption is triggered by hovering over the photo on desktop. However, this doesn't apply to mobile, and the same custom CSS that allows it to function on a desktop creates a really unsightly effect. Does anyone have a block of code or some kind of command that would allow me to solely have the function on a desktop but remove it from mobile devices?

Custom CSS: 

.gallery-caption {
position: absolute;
top: 0;
left: 0;
background: rgba(255,255,255,0.6); /* overlay color */
height: 100%;
max-width: unset;
padding: 0;
opacity: 0;
  }
.gallery-caption-wrapper {
display: flex;
align-items: center; /* center vertically */
justify-content: center; /* center horizontally */
}
.gallery-caption-content {
font-size: 1.3rem !important; /* caption font size */
color: white; /*caption font color */
}
.gallery-grid-item {
position: relative;
}
.gallery-grid-item:hover .gallery-caption {
opacity: 1;
}
.gallery-caption-grid-simple {
transition-delay: 0ms;
}
.gallery-caption a {
  color: black; /* color of the caption text */
}
footer p1{
  font-size: 10px;
  color: white !important;
}

Did you ever figure this out? I have the same question.

23 hours ago, CooperWhite said:

Did you ever figure this out? I have the same question.

If you share link to page where you have problem, we can help easier