How to get the remaining values from django array loop

I am learning some stuff in the Django template but I encountered some difficulty in adding my dynamic style. My goal here is to add a span and class in the first word but I don't know how to get the remaining words. Here's my code:

 <h4>
{% for b in banner.title.split %}
    {% if forloop.counter == 1 %}
    <span class="main-color">{{ b }}</span>
    {% else %}
    {{ b }} {% comment %} HOW CAN I GET THE REMAINING HERE{% endcomment %}
    {% endif %}
{% endfor %}
</h4>

{% comment %}
Target output:
<h4>
    <span class="main-color">OUR</span>
    WORKS
</h4>
{% endcomment %}

Is it possible to do this in the template? As much as possible I want to use Django rather than CSS and JS.

Also, I missed this part but the banner.title is a group of words uploaded via CMS. It is a page title in short like OUR WORKS, BRAVE FOR GOOD...

The current output of my code above will generate something like this.

<h4>
<span class="main-color">OUR</span>
OUR WORKS
</h4>