Subtitle font highlights in image card -- spaces disappear

Site URL: https://www.sundayschoolwine.com/membership

Hi, I put highlights behind my subtitle text in these image cards using this code: 

.image-subtitle p {
background: linear-gradient(180deg, rgba(255,255,255,0) 15%, #FCFBEA 40%);
display: inline;
  color: black;
  font-size: 22px !important;
}

Works fine, except I had the text separated with a space (see second photo w/o highlight behind text). But when I enter the highlight coding, the space disappears. Help!

Add to Custom CSS

body:not(.image-block-card-dynamic-font-sizing) .sqs-block-image .design-layout-card .image-title p {
    display: inline-block !important;
}

On 6/2/2021 at 3:53 PM, tuanphan said:

Add to Custom CSS

body:not(.image-block-card-dynamic-font-sizing) .sqs-block-image .design-layout-card .image-title p {
    display: inline-block !important;
}

 

@tuanphan Didn't do it. Here's what I have and still looks the same as the first photo.

#membership-intro .image-subtitle p {
background: linear-gradient(180deg, rgba(255,255,255,0) 15%, #FCFBEA 40%);
display: inline;
  color: black;
  font-size: 22px !important;
}
body:not(.image-block-card-dynamic-font-sizing) .sqs-block-image .design-layout-card .image-title p {
    display: inline-block !important;
}

Still haven't found a solution. 😭  @tuanphan any thoughts??

Try this

div:not(.image-block-card-dynamic-font-sizing) .image-title p {
    display: inline-block !important;
}