Customize <figcaption> in WordPress Using CSS

Question

I'm working on WordPress trying to customize the figcaptions for the image blocks. I have images with different caption heights because some captions have fewer lines than others. Examples for visual reference: (ignore the different fonts)

The solid background cuts off the end of the picture, so I want to move the figcaption just below the image (still in the figure) so nothing gets cut off. But because different captions have different heights, it produces different results, including:

1. captions getting cut off because of the next image block

2. captions moving way past the end of the image, creating a space in between image and caption

I've tried everything that I know. Fiddling with the margins, attempting to target specific images and/or figcaptions, targeting different elements, but nothing has worked so far. The images I showed you has this code:

.wp-block-image figcaption  {
    color:#fff;
    font-weight:bold;
    line-height:135%;
    background-color:rgba(0,0,0,0.8);
    position:absolute;
    margin:0px 0px -132px 0px;
}

This is the official HTML of the image blocks, but I would have to change it via CSS. I'm just trying to provide as much information as possible.

<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" width="730" height="973" src="https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/IMG_3534-5.jpeg?resize=1500%2C2000&amp;ssl=1" alt="first bookshelf" class="wp-image-2159" srcset="https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/IMG_3534-5.jpeg?w=1500&amp;ssl=1 1500w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/IMG_3534-5.jpeg?resize=225%2C300&amp;ssl=1 225w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/IMG_3534-5.jpeg?resize=768%2C1024&amp;ssl=1 768w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/IMG_3534-5.jpeg?resize=1152%2C1536&amp;ssl=1 1152w" sizes="(max-width: 1000px) 100vw, 1000px"><figcaption><em>First Shelf: Broadview Collection, Shakespeare, Non-Fiction.<br>Second Shelf: The Shadowhunter Chronicles.<br>Third Shelf: Fantasy.<br>Fourth Shelf: Dystopia, Science Fiction, Contemporary YA.<br>Fifth Shelf: Contemporary YA.<strong><br></strong>Sixth Shelf: Contemporary YA, Contemporary Adult.</em></figcaption></figure></div>

<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/C286EAB4-5810-4A12-B781-2DFA307937D0-3.jpg?resize=750%2C1000" alt="" class="wp-image-2126" width="650" height="867" srcset="https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/C286EAB4-5810-4A12-B781-2DFA307937D0-3.jpg?resize=768%2C1024&amp;ssl=1 768w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/C286EAB4-5810-4A12-B781-2DFA307937D0-3.jpg?resize=225%2C300&amp;ssl=1 225w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/C286EAB4-5810-4A12-B781-2DFA307937D0-3.jpg?resize=1152%2C1536&amp;ssl=1 1152w, https://i0.wp.com/www.regalreads.com/wp-content/uploads/2021/02/C286EAB4-5810-4A12-B781-2DFA307937D0-3.jpg?w=1500&amp;ssl=1 1500w" sizes="(max-width: 750px) 100vw, 750px"><figcaption>Top Shelf: Contemporary Adult, Historical Fiction.<br>Second Shelf: Pretty Little Liars, Creekwood, The Lying Game.<br>Third Shelf: Classics, Middle Grade, Non-Fiction.</figcaption></figure>

So my question is: how can I style the figcaptions so they fall right under their respective images without messing up other images? And that it works regardless of the caption's height/number of lines?

I tried to be as clear as possible, but if something isn't clear, please let me know!