Show only 1 image depending collection selected Shopify

Question

I'm working on a Collection Banner Section with 2 images on Shopify. I just want to replicate the way the Collection-Hero works.

I have 2 Collections: Wallpaper and Original-Art.

I have a Collection Banner Section at the bottom of my Collection template which contains two different images.

I want to display this image if the user is checking the Original Art Collection.

But in case is on the Wallpaper Collection I want to show this one:

Currently I can only show one of them. You can see it here: https://colorkindstudio.com/collections/

So far this is what I've tried in order to achieve this. I added a block to the settings Schema to allow the customer to select the collection where that section should be displayed:

{% schema %}
{
"name": "Collection Banner",
"max_blocks": 4,
"settings": [
    {
        "type": "header",
        "content": "Section Layout"
    },
    {
        "type": "checkbox",
        "id": "enable_layout",
        "label": "Enable Layout",
        "default": false
    }
],
 
"blocks": [
            {
                "label": "Collection",
                "id": "collection_id",
                "type": "collection"
            }
          ]

}
{% endschema %}

After that I compare if the collection selected is the same as the current collection and it should only display the section where the collection is Wallpaper or Original-Art but instead is showing both at the same time.

**{% for block in section.blocks %}
{% assign collection_id = collections[block.settings.collection_id] %}
{% if collection_id.handle == collection.handle %}**

<div class="halo-section padding-top-{{ top }} padding-bottom-{{ bottom }} {{ border_top }} {{ border_bottom }} {{ background_color }}" data-section-id="{{ section.id }}" data-section-type="collection-banner">
          {% for block in section.blocks %}
              <div class="image-with-text-2{% if block.settings.layout == 'right' %} image-with-text-2--right{% endif %}">
                  <div class="image-with-text-2__image"{% if block.settings.image != blank %} style="background-image: url({{ block.settings.image | img_url: 'master' }});"{% endif %}>
                      {% if block.settings.image == blank %}
                          <div class="placeholder-background">
                              {{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
                          </div>
                      {% endif %}
                  </div>
                  <div class="image-with-text-2__content">
                      <div class="section-header">
                          {% if block.settings.subtitle != blank %}
                              <h5 class="subtitle">{{ block.settings.subtitle }}</h5>
                          {% endif %}
                          {% if block.settings.title != blank %}
                              <h2 class="title">{{ block.settings.title }}</h2>
                          {% endif %}
                          {% if block.settings.description != blank %}
                              <p>{{ block.settings.description }}</p>
                          {% endif %}
                          {% if block.settings.button != blank %}
                              <a href="{{ block.settings.button_link }}" class="btn btn--primary" aria-label="link">
                                  {{ block.settings.button }}
                              </a>
                          {% endif %}
                      </div>
                  </div>
              </div>
          {% endfor %}
         </div>



{% else %}
<h4>-</h4>
{% endif %}
{% endfor %}

This is how they look right now. You won't see this on the live site because I can't mess the site, so i'm putting a screenshot here. Both images are displayed at the same time.

How can I show only 1 image depending on the collection selected?