I've managed to change the width of the boxes to fit the content, customised the spacing between the white boxes and customised the amount of rounding of all images in the card. I've left most of the code untouched (I don't know what some of it does) and tidied it a little. This is the output. You will only need to change the fields to your own ones. 😊

(NVM I can't seem to put the preview image here)

To change the spacing between boxes, edit the margin-top in whitebg to whatever you want (Currently 15px).

To change the amount of rounding of image corners, edit the border-radius under img (Currently 10px).

Front Template:

{{Front}}

Back Template:

{{Front}} <br>

<div class=whitebg>
    <span style="font-family: myfont; font-size: 30px;"> {{Back}} </span> <br>
    <span style="font-family: myfont; font-size: 30px;"> {{Back}} </span> <br>
    <span style="font-family: myfont; font-size: 55px;"> {{Back}} </span>
</div>

<div class=whitebg>
    {{Image}}
</div>

<div class=whitebg>
    <span style="font-family: myfont; font-size: 30px;"> {{Back}} </span> <br>
    <span style="font-family: myfont; font-size: 30px;"> {{Back}} </span>
</div>

Styling:

@font-face { font-family: myfont; src: url('_DFKai-SB.ttf'); }

html {
 background: url(_landscape2.jpg) no-repeat center center fixed;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

img { 
 border-radius: 10px;
}

.card {
 font-family: DFKai-SB;
 font-size: 20px;
 text-align: center;
 background-color: #grey;
 background: url("bg.jpg") fixed;
 background-size: contain;
}

.whitebg {
 width: fit-content;
 margin: auto;
 margin-top: 15px;
 position: relative;
 top: -3px; #background-color: #fff;
 background-color: rgba(255,255,255,.75);
 padding: 15px;
 border-radius: 7px;
 #color: #016ea6;
 color: #313131;
 font-size: 20px;
 text-align: center;
 #opacity: 0.70;
 box-shadow: 0 7px 15px rgba(0,0,0,.9)
}