Display one featured post(that is most recent), followed by Recent posts(Hubspot)

Question

I'm currently working on a Blog Listings page. I'd like to display one Featured post at a time, and up top before other posts. And in order to test this out, I created a couple of Test blogs. One is with another Featured tag.

So my blog listings page is showing the most recent posts, which is nice...

But I'd like to show the most recent Featured post up top. I also would like to add a Recent Posts heading on ONLY the first recent posts card but can't seem to figure out how, considering the cards are in a for-loop and it would show Recent Posts on every card if I do add the heading in the code.

Wondering if someone with another set of eyes can troubleshoot my code and see what's up!

Thank you :)

I got my source code from: https://www.stephanieogaygarcia.com/hubspot-website-development/set-featured-posts-on-the-hubspot-blog-listings-page

Here is how the page looks so far:

Blog Listing Page

And here is the code:

{% set featured_posts = blog_recent_topic_posts('default', 'featured', 1) %}
{% for post in featured_posts %}
  {% for topic in post.topic_list %}
    {% if topic.name == 'featured' %}
      <section class="blog-index-list">
        <article class="blog-index__post-wrapper-list-">
          <div class="blog-index__post-list">
            {% if post.featured_image and group.use_featured_image_in_summary %}
              <a class="blog-index__post-image-list" 
                 style="background-image: url('{{ post.featured_image }}');" 
                 href="{{ post.absolute_url }}">
              </a>
            {% endif %}
            <div class="blog-index__post-content-list">
              <div>
                {% set featured_tag = post.topic_list | first %}
                {% if featured_tag %}
                  <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
                {% endif %}
                                 <div class="blog-index__post-meta-list">
                  <span class="blog-index__post-author-list">
                    {{ post.blog_post_author }} |
                  </span>
                  <span class="blog-index__post-date-list">
                    {{ post.publish_date | datetimeformat('%b %e, %Y') }}
                  </span>
                
                </div>
                <h3><div class="blog-title"><a href="{{ post.absolute_url }}">{{ post.name }}</a></div></h3>
                {% if content_group.show_summary_in_listing %}
                  <div class="meta-description">{{ post.meta_description | default(post.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
                {% endif %}
              </div>
              <a href="{{ post.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
            </div>
          </div>
        </article>
      </section>
    {% endif %}
  {% endfor %}
{% endfor %}

{# Blog listing #}
{% set remaining_posts = contents | sort(attribute='publish_date', reverse=True) %}
{% for content in remaining_posts %}
  {# On the blog listing page, the first post will be featured above older posts #}
  <article class="blog-index__post-wrapper-list">
    <div class="blog-index__post-list">
      {% if content.featured_image and group.use_featured_image_in_summary %}
        <a class="blog-index__post-image-list" 
               style="background-image: url('{{ content.featured_image }}');" 
               href="{{ content.absolute_url }}">
            </a>
            {% endif %}
            <div class="blog-index__post-content-list">
              <div>
                {% set featured_tag = content.topic_list | first %}
                {% if featured_tag %}
                <span class="blog-index__post-preheader-list">{{ featured_tag }}</span>
                {% endif %}
                
                <h3><div class="blog-title"><a href="{{ content.absolute_url }}">{{ content.name }}</a></div></h3>
              <div class="blog-index__post-meta-list">
                <span class="blog-index__post-author-list">
                  {{ content.blog_post_author }} |
                </span>
                <span class="blog-index__post-date-list">
                  {{ content.publish_date | datetimeformat('%b %e, %Y') }}
                </span>
                
              </div>
                {% if content_group.show_summary_in_listing %}
                <div class="meta-description">{{ content.meta_description | default(content.post_summary, true) | truncatehtml(250, '...', false) }}</div> 
                {% endif %}
              </div>

             
                {#<a href="{{ content.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a> #}
              
            </div>
            <a href="{{ content.absolute_url }}"> <button class="blog-button-cta"> Read More </button> </a>
          </div>
        </article>
        {% endfor %}
```