How to change placement of gallery image description (mobile)? NOTE: Custom code in place to show description in lightbox.

Hi there!

I recently used some custom code on my gallery page (https://crytime.art/) to make it so the description for each image comes up when you're in lightbox mode. This has worked successfully, however, I'd like to change the positioning of the description on mobile (desktop positioning looks fine). Here's how it looks (I'd like to raise it up).

And here is the custom code I currently have in Advanced > Page Header Code Injection:

/* lightbox captions */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
    $('.gallery-lightbox-list .gallery-lightbox-item').each(function(){
        var text = $(this).find('img').attr("alt");
        console.log(text);
        $(this).append('<div class="lightbox-caption">' + text + '</div>');
    })
})
</script>
<style>
  .lightbox-caption {
    color: #4760A4;
    font-weight: bold;
    margin: 15px 0;
    text-align: center;
    display: none;
    position: absolute;
    bottom: -45px;
    z-index: 9999;
}
    
.gallery-lightbox-wrapper:hover {
	cursor: pointer;
}
.gallery-lightbox-item[data-in='false'] .lightbox-caption {
	display: none!important;
}
.gallery-lightbox-item[data-active='true']:hover .lightbox-caption{
	display: inline-block;
}
.gallery-lightbox-wrapper:hover .gallery-lightbox-item[data-active='true'] .lightbox-caption{
	display: inline-block;
}
  .gallery-lightbox .lightbox-caption {
    display: block !important;
}
</style>



/* one column on mobile */

<style>
  @media screen and (max-width:767px) {
	.gallery-masonry-wrapper.gallery-masonry-list--ready {
    height: auto !important;
}
figure.gallery-masonry-item {
    position: relative !important;
    width: 100% !important;
    transform: unset !important;
	margin-bottom: 10px !important;
}
.gallery-masonry-item-wrapper {
    height: auto !important;
}
.gallery-masonry .gallery-masonry-item[data-loaded] img {
    width: 100% !important;
}
.gallery-masonry {
  	
}
}
</style>

I've tried to futz around and solve it myself, but I can't seem to get it. Any help would be greatly appreciated!

@tuanphan that worked perfectly, thank you!