Custom CSS gallery caption text size affecting gallery formatting

Hi there, I've added some custom CSS to Simple Gallery on my company website: 

// distillers team images //

.gallery-caption-grid-simple p:first-line {
        font-weight: 700 !important;
        font-size: 1.5rem !important;
          margin-bottom: 12px !important;
}
.gallery-caption-grid-simple p {
    text-align: center !important;
    font-weight: 300 !important;
    font-size: 1rem !important;
      line-height: 1.6rem !important;
    white-space:pre
}

Now I'm having two problems:

I seem to have increased the size of the images, and as a result, the gallery is wider than the page. I need to scroll sideways to see the full grid which is not ideal. This is especially noticeable on mobile.

Is there a way to increase the size of the first line of each caption as I have done above, but without affecting the width of the gallery?

Can you share link to page in your screenshot? We can check problem easier

Hi @tuanphan, sure thing – the page with that grid is https://www.wearedistillery.com/about-1

Use this CSS code

.gallery-caption-grid-simple p::first-line {
    font-size: 50px !important;
    font-weight: bold !important;
}
@media screen and (min-width:768px) {
.gallery-grid-wrapper {
    width: 100% !important;
    grid-template-columns: repeat(4,minmax(0,1fr)) !important;
}}