Stop text overflow on Poster Image Block responsiveness

Site URL: https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes

I've been trying to find the correct fix, but I'm not a CSS whisperer. Maybe one of you can help?

When this page is reduced to mobile or table, the text overflow in the Poster Image Block isn't staying within the constraints of the block. How do I fix it so the entire Image Block reduces in size including the text?

https://azalea-wedge-79l6.squarespace.com/success-stories/native-shoes
PW: jldnetrush

Add to Design > Custom CSS > then save & reload the site

/* Poster overflow */
@media screen and (max-width:991px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 50% !important;
}
}
@media screen and (max-width:767px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 100% !important;
}
}

1 hour ago, tuanphan said:

Add to Design > Custom CSS > then save & reload the site

/* Poster overflow */
@media screen and (max-width:991px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 50% !important;
}
}
@media screen and (max-width:767px) {
div#block-1ad8e95619d3440bbe15 .content-fill {
    padding-bottom: 100% !important;
}
}

 

What if I want to make this general for every time I'm using a Poster Image block? This same design is in all of the blog posts for that category.

15 hours ago, JoshuaLipka said:

What if I want to make this general for every time I'm using a Poster Image block? This same design is in all of the blog posts for that category.

Each poster will need a different code. div#block....15 is block id. Use this tool to find id. https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en