Remove Description Hover Effect from Videos on Mobile

Hey there,

Looking for some help with keeping custom code to desktop view only. I currently have code set to reveal the video description when a user hovers over that video block. I like how this looks on the desktop view and want to keep it, but it doesn't work well on mobile. For mobile only, I'd like to either remove this so no description is visible or have the description visible below each video block. My page is: www.brendanmcdonnell.net/work-test (p - password) and the code I'm using currently is pasted below. Thanks in advance for any help!

/* Reels video overlay */
.video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block .intrinsic:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 0.3s;
}
.video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 0.3s;
}

@brendanmcd22 You can replace your existing code with the following to display the description below each video block:

@media screen and (min-width: 768px) {
/* Reels video overlay */
.video-caption-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 100%;
    text-align: center;
    color: white;
    font-size: 16px;
    z-index: 50000;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block .intrinsic:after {
    content: "";
    background-color: rgba(0,0,0,0.5);
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20000;
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s;
}
.video-block:hover .intrinsic:after {
    opacity: 1;
    transition: all 0.3s;
}
.video-block:hover .video-caption-wrapper {
    opacity: 1;
    transition: all 0.3s;
}
}

To completely hide description on mobile view, you can add the following code:

@media screen and (max-width: 767px) {
	.video-caption-wrapper {
		display: none !important
	}
}

@Lesum thank you so much! The bottom code worked for disabling the video descriptions on mobile, but the top code did not work for moving descriptions below the video, the hover effect remained as before. Any idea why that may be? I deleted my previous code and replaced it with what you suggested.

Also, maybe I should have been more clear in my original post, but if I were removing the video description text on mobile, I'd also like to remove the black box that appears over each video block (it's difficult for the user to watch with the video with the black box appearing over top of it).