Gallery lightbox with added descriptions, images distorted

Site URL: https://www.monicaherndon.com/sportsgallery 

Hello, 

I added CSS to my site to show descriptions on each photo in the gallery lightbox. Now the images are distorted when viewed in the lightbox. How can I fix that? 

This is the CSS code I currently have on my site:

.collection-type-gallery #slideshowWrapper .image-description {
    text-align: center;
    width: 100%;
    padding: 10px 0px 0;
    background: #fff;
    display: block;
    position: relative;
    bottom: 0px;
    margin-top: 0px;
      margin-bottom: 25px;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img {
    max-height: 90%;
    margin: 0 auto !important;
      margin-left: auto;
      margin-right: auto;
    top: 0 !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit { 
      position: sticky;
    max-height: 100%;
    width: 800px !important;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(0%, 0%);
    right: auto !important;
}

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide .sqs-video-wrapper.video-fit .intrinsic-inner {
    text-align: center;
}

Thank you!

Try this CSS code under

.collection-type-gallery #slideshowWrapper .sqs-gallery-design-stacked-slide img {
    width: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

Thanks @tuanphan, the images are no longer distorted but the descriptions are gone.

9 hours ago, monicaherndon said:

Thanks @tuanphan, the images are no longer distorted but the descriptions are gone.

You can remove my code, I will test again

Removed it. Thanks