Additional CSS to move caption to below image no longer working

Although I don’t understand the code I’ve been using the additional CSS I found on a forum to move the caption to below the images in Guttenberg Galleries on my pages. It’s worked fine for a couple of years. Now when I create a new page it seems to ignore the code and the caption remains on the image. The pages I created previously still have the caption below the image.

I also noticed that when I change the code in live mode it affects the old pages, but nothing happens on a new page.

Any suggestions?

.page .wp-block-gallery .blocks-gallery-item figure {
flex-direction: column;
}

.page .wp-block-gallery .blocks-gallery-item figcaption {
position: relative;
bottom: auto;
width: 100%;
max-height: 5%;
overflow: visible;
padding: 10px 0 20px 0;
color: #333;
text-align: center;
font-size: 13px;
background: linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent);
}