I have some code that checks for a colour swatch on Shopify liquid code, it links to the silver or gold version of a product based on a custom meta field, but the text is all squished, can anyone help make sure the text isnt so close? I imagine its a simple CSS change but no matter what I can’t get it working. Probably something to do with the way I’ve awkwardly coded it.

Image of the results here

{% assign current_product_color = product.metafields.custom.colour_swatch %}
 {% assign sync_product = product.metafields.custom.sync_variants.value %}
{% assign current_product_color_path = current_product_color |  file_img_url %}


<style>

.circle a span {
display: inline-block;
width: 100px; 
height: 50px;
border-radius: 100%; 
 
border: 1px solid black;  }


    .circle {
        width: 140px;            
        height: 100px;             
        border-radius: 50%;      
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;        
        margin: 20px;  
        margin-left: 100px;   
    }

.color-label1{
    width: 150px; /* Adjust the width as needed */
    display: inline-block; /* Ensures proper spacing if it's inline content */
 
margin: 0px;
padding-left: 10px;
margin-right: -40px;
Font-size: 15px
}

.color-label2{
    width: 150px; /* Adjust the width as needed */
    display: inline-block; /* Ensures proper spacing if it's inline content */

margin: 0px;
padding-left: 10px;
margin-right: -40px;
Font-size: 15px
}


.color-swatch-container {
    display: flex; gap: 8px;
}

 {% if current_product_color == 'Silver.png' %}
    {% assign related_product_color_path = 'Gold.png' | file_img_url %}
   
{% elsif current_product_color == 'Gold.png' %}
    {% assign related_product_color_path = 'Silver.png' | file_img_url %}
   
{% else %}
    {% comment %} GNDN {% endcomment %}
{% endif %}
</style>
<div class="color-swatch-container">
<div class="circle">
    <a href="/products/{{ sync_product.handle }}">
      <span style="color: white; font-weight: bold; display: inline-block; width: 48px; height: 48px; background: url('{{ related_product_color_path }}') no-repeat center center; background-size: cover; border-radius: 50%;"></span>
    </a>

<div class="color-label1">
    {% if current_product_color_path contains 'Gold' %}
        Sterling Silver
    {% else %}
        Gold Plated Sterling Silver
    {% endif %}
</div>

<div class="circle">
    <a href="{{ product.url }}">

      <span style="color: white; font-weight: bold; display: inline-block; width: 48px; height: 48px; background: url('{{ current_product_color |  file_img_url }}') no-repeat center center; background-size: cover; border-radius: 50%;"></span>
    </a>
<div class="color-label2">
{% if current_product_color == 'Silver.png' %}

    <h7> Rhodium Plated Sterling Silver</h7>
{% elsif current_product_color == 'Gold.png' %}

    <h7>Gold Plated Sterling Silver</h7>
{% else %}
    {% comment %} GNDN {% endcomment %}
{% endif %}
</div>
</div>

Below is the resulting HTML in the source code

<style>

.circle a span {
display: inline-block;
width: 100px; 
height: 50px;
border-radius: 100%; 
 
border: 1px solid black;  }


    .circle {
        width: 140px;            
        height: 100px;             
        border-radius: 50%;      
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;        
        margin: 20px;  
        margin-left: 100px;   
    }

.color-label1{
    width: 150px; /* Adjust the width as needed */
    display: inline-block; /* Ensures proper spacing if it's inline content */
 
margin: 0px;
padding-left: 10px;
margin-right: -40px;
Font-size: 15px
}

.color-label2{
    width: 150px; /* Adjust the width as needed */
    display: inline-block; /* Ensures proper spacing if it's inline content */

margin: 0px;
padding-left: 10px;
margin-right: -40px;
Font-size: 15px
}


.color-swatch-container {
    display: flex; gap: 8px;
}

 
</style>
<div class="color-swatch-container">
<div class="circle">
    <a href="/products/gold-plated-bourbon-biscuit-charm">
      <span style="color: white; font-weight: bold; display: inline-block; width: 48px; height: 48px; background: url('//tradelilycharmed.com/cdn/shop/files/Gold_small.png?v=13095677172952472252') no-repeat center center; background-size: cover; border-radius: 50%;"></span>
    </a>

<div class="color-label1">
    
        Gold Plated Sterling Silver
    
</div>

<div class="circle">
    <a href="/products/silver-bourbon-biscuit-charm">

      <span style="color: white; font-weight: bold; display: inline-block; width: 48px; height: 48px; background: url('//tradelilycharmed.com/cdn/shop/files/Silver_small.png?v=9783407715755959972') no-repeat center center; background-size: cover; border-radius: 50%;"></span>
    </a>
<div class="color-label2">


    <h7> Rhodium Plated Sterling Silver</h7>

</div>