How to style image captions in masonry gallery?

I am trying to style the captions for a masonry gallery in Squarespace 7.1 . Currently, I am using this code: 

.gallery-caption p:first-line {color: black; font-size: 1.2rem; font-weight:regular}

Unfortunately, this only applies to the first line of the caption. Once the caption is longer and breaks to a second line, it no longer has any effect (See attachment). And yes, I am aware that the code says "first-line" but what other option would I have?

Any advice?

Remove this

:first-line

Hi tuanphan. Thank you for your suggestion. When I remove :first-line from .gallery-caption p:first-line {color: black; font-size: 1.2rem; font-weight:regular}, it eliminates all custom formatting from the gallery captions. I am trying to customise the complete captions for images in masonry.

Can you share link to page where you use masonry?

On 3/30/2023 at 5:46 AM, tuanphan said:

Can you share link to page where you use masonry?

https://salmon-sphere-62ml.squarespace.com/work/portrt

PW: AZI2022

Thank you, @tuanphan. This solved my issue perfectly. Do you have a solution to style the overlay caption as seen in the attachment with CSS?

https://salmon-sphere-62ml.squarespace.com/work/portrt

PW: AZI2022

On 4/12/2023 at 8:31 PM, ben_space said:

Thank you, @tuanphan. This solved my issue perfectly. Do you have a solution to style the overlay caption as seen in the attachment with CSS?

https://salmon-sphere-62ml.squarespace.com/work/portrt

PW: AZI2022

What do you mean? It looks same to me

On 4/15/2023 at 1:13 PM, tuanphan said:

What do you mean? It looks same to me

The image caption in lightbox mode is in a different font and stale as the masonry image caption. I want to adjust the style and font of the image caption in the lightbox view.

On 4/17/2023 at 5:01 PM, ben_space said:

The image caption in lightbox mode is in a different font and stale as the masonry image caption. I want to adjust the style and font of the image caption in the lightbox view.

Add this to Design > Custom CSS

/* Lightbox caption */
.tlightbox-caption {
    font-family: europa;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: none;
    line-height: 1.8em;
    font-size: 1.2rem !important;
    color: #000 !important;
    font-weight: bold !important;
}