Link image with CSS in text editor

I want the images I insert in the text editor to have borders with shadows around it and the image along with the caption underneath it to be center aligned. I achieved it using the following code, as the code that Elementor inserts is little different and I am not able to use it:

<figure align="center">
<img class="wp-image-6200 size-large" src="https://www.xxxxxxxx.com/wp-content/uploads/2021/03/jonatan-pie-3h8OXvt4-0-unsplash-1024x684.jpg" alt="Aurora in Iceland" width="1024" height="684" style="border: 11px solid #fff; box-shadow: 5px 5px 15px grey; margin: 25px 0 0 0;"/><figcaption> Aurora in Iceland</figcaption>
</figure>

The code inserted by elementor is of different format like below with which the caption is not center aligned:

[caption id="attachment_2218" align="aligncenter" width="640" class="center"]<a href="https://www.xxxxxxxxx.com/wp-content/uploads/2020/10/thingvellir-intro.jpg"><img class="wp-image-2218 size-full" style="border: 11px solid #fff; box-shadow: 5px 5px 15px grey; margin: 25px 0 0 0;" title="Thingvellir Nation Park" src="https://www.myheartontravel.com/wp-content/uploads/2020/10/thingvellir-intro.jpg" alt="thingvellir national park iceland" width="640" height="480" /></a> <i style="font-size: 14px;">Thingvellir national park, Iceland. Image by D L from Pixabay </i>[/caption]

I don’t want to do this manually every time by changing the HTML code. How do I make use of the ‘Image CSS Class’ option while inserting the image to achieve this? I tried the below CSS code int the custom CSS (where elemtextimage is the Image CSS Class name), but it isn’t working.

.elemtextimage{
	border: 11px solid #fff; box-shadow: 5px 5px 15px grey; margin: 25px 0 0 0;
}

The page I need help with: [log in to see the link]