How to adjust content wrapper padding on Gallery Reel that has custom placement of text & text background

Site URL: https://www.foodtrucksofficial.com/los-plebes

Page: https://www.foodtrucksofficial.com/los-plebes
PW: dreambig

Hello, everyone.

I would be happy to receive any help from someone who might be able to assist me in adjusting the content wrapper padding (specifically the lower padding - at least, I think that's the proper term).

1. When I remove the caption feature under the gallery reel options, the unwanted spacing disappears completely and the gallery reels fit quite snug with no unwanted space between them. BUT, when I activate the caption feature (which is what I want), despite having moved the text and text background to appear right over each food item (when one hovers over the images), the space underneath the gallery reel sections appear as you see below.

2. Here's the entirety of the code I'm using. I'm a newbie here, and I've copied and pasted from different sources, so please forgive the untidy nature of the sheet.

Thank you all for your kind assistance.

Cheers! 😃

***********CODE CONTENT FOLLOWS*************

html {

scroll-behavior: smooth;

}

.gallery-reel-control-btn {color:black}

.gallery-reel-control-btn::before{background-color:hsl(191, 100%, 50%)}

.gallery-reel-control-btn::before {

  padding: 13px;

  border-radius: 50%;

}

// Grid Gallery - Simple Layout //

 

.gallery-grid-item img {

  border-radius: 50%;

}

 

// Grid Gallery - Strips Layout //

 

.gallery-strips-item img {

  border-radius: 50%;

}

 

// Grid Gallery - Masonry Layout //

 

.gallery-reel-item img {

  border-radius: 100%;

}

 

//-- Change the font size of the caption text

 

.gallery-caption p{font-size:1.25rem!important}

 

//-- Change the color of the image gallery caption text

 

.gallery-caption p{color:black!important}

.gallery-caption {background-color:yellow;

  opacity: 10%;

  position: absolute;

    left: -5px;

    top: -22px;

    right: 0;

    bottom: 0;

    display: flex;

    z-index: 999;

    justify-content: center;

border-radius: 50%;

height: 225px;

width: 225px;

}

 

.gallery-caption p{text-align:center}

 

.gallery-caption {opacity:0!important; transition-duration:0s}

.gallery-reel-item:hover .gallery-caption {opacity:1!important; transition-duration:3s}

.gallery-caption-content {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    bottom: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1;

    padding: 7%;

    transition: opacity ease 200ms !important;

    opacity: 1 !important;

pointer-events: none;

  color: #fff;

  }

figcaption.gallery-caption.gallery-caption-reel {

    background-color: rgba(255, 255, 255, 1);

    top: 50%;

    left: 50%;

    transform: translate(-50%,-50%);

    width: 95%;

    z-index: 9999;

    height: 95%;

    margin-top: 0 !important;

}

*********END OF CODE************

PHOTO 1

Photo 2

*******************************************************************************************************************************

Photo 3

*******************************************************************************************************************************