SVG Grid & Text

Question

I am customizing a Ghost theme to create a 2 column/2 row grid with svg images, urls, and text centered below.

A work in progress can be seen at https://country-musicfy.ghost.io/home

I cannot figure out how to make the svg images the same height, nor make the text below centered and 20px

I am open to creating buttons with the svg images and text if anyone has suggestions.

Below is html and css:

<div class="row"> 
<div class="column">
<a href="https://country-musicfy.ghost.io/lofi"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/music-alt.svg" width="100%" loading="lazy" 
class="svg-icon" class="svg-text" alt=""><p>LoFi 128</p></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/prime"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/music.svg" width="100%" loading="lazy" 
class="svg-icon" alt=""></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/hifi"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/speaker.svg" width="100%" loading="lazy" 
class="svg-icon" alt=""></a>
</div>
<div class="column">
<a href="https://country-musicfy.ghost.io/master"><img src="https://country- 
musicfy.ghost.io/content/images/2022/03/headphones-alt.svg" width="100%" loading="lazy" 
class="svg-icon" alt=""></a>
</div>
</div>


<style>
/* Two image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 50%;
padding: 5px;
background: #282A2D;
}
.svg-icon {filter: invert(65%) sepia(14%) saturate(3161%) hue-rotate(185deg) 
brightness(103%) contrast(105%);}

.svg-text {
text-align: justify;
width: 100%;
}

/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
</style>