Instagram Gallery on Mobile: Styling Issues for Video Posts

On mobile, I'm having issues with:

1. Applying the same styling that appears on image posts for video posts (border, box-shadow, border-radius)
2. Video posts appearing cut off
3. Generally stacking poorly with no spacing

Website: https://coral-seabass-fgw5.squarespace.com/
Location: Instagram Gallery Block in Footer
Device: Mobile (all browsers)
Screenshot attached
My code:

.instagram-block .slide a img,
.instagram-block .slide .sqs-video-overlay img {
	border: 2px solid #000 !important;
    border-radius: 15px !important;
    box-shadow: 10px 10px #E1CBEE !important;
}


@media screen and (min-width: 749px) {
.instagram-block .slide,
.instagram-block .sqs-video-overlay,
.instagram-block .sqs-gallery-block-grid,
.instagram-block .content-wrapper {
  overflow: visible !important;
}
}

Big thanks!

@tuanphan would love your help with this, thank you 🙂

Add this CSS code to fix on mobile

@media screen and (max-width: 767px) {
.instagram-block .slide, .instagram-block .sqs-video-overlay, .instagram-block .sqs-gallery-block-grid, .instagram-block .content-wrapper {
    overflow: visible !important;
}

.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 
.sqs-gallery-design-grid-slide {
    height: 300px !important
}

.instagram-block .slide .sqs-video-overlay img {
    top: 0 !important;
}
}

Thank you @tuanphan - nothing is cut off now, however it's showing like this: 

You can remove the code, I will check it again

On 9/26/2023 at 12:18 PM, PEARLERwork said:

Thank you @tuanphan - nothing is cut off now, however it's showing like this: 

Try this CSS code

@media screen and (max-width: 767px) {
.sqs-gallery-block-grid.sqs-gallery-thumbnails-per-row-5 
.sqs-gallery-design-grid-slide {
    height: 300px !important
}
.instagram-block .slide .sqs-video-overlay {
    height: auto 
}
.instagram-block .slide a img, .instagram-block .slide .sqs-video-overlay img {
    top: 0 !important;
    width: 90% !important;
    height: auto !important;
    left: unset !important;
}
.instagram-block .margin-wrapper, .instagram-block  .sqs-video-wrapper .intrinsic {
    width: 100%;
    height: 100%;
    padding-bottom: unset !important;
}
.content-wrapper.content-fit, .sqs-video-wrapper.video-fit {
     width: 100% !important;
    height: 100% !important;
    padding-bottom: unset !important;
    top: 0 !important;
    position: static !important
}
.instagram-block  .intrinsic-inner {
    padding-bottom: unset !important;
    width: 100% !important;
    height: 100% !important;
}
.sqs-layout .sqs-gallery-design-grid-slide {
    width: 50% !important;
}
.sqs-layout .sqs-gallery-design-grid-slide  * {
    box-sizing: border-box;
}
}