Module breaks when below another module

[TCS1]

I have these 2 modules
the CTA Block which just renders an image with text

{% macro renderImage() %}
	{% if module.image.src %}
		<img src="{{module.image.src}}" alt="{{module.title|safe|striptags}}" class="cta-block-img" />
	{% else %}
		<img src="https://place-hold.it/660x656" alt="{{module.title|striptags}}"  class="cta-block-img" />
	{% endif %}
{% endmacro %}
  
{% macro renderContent() %}
	<h2>{{module.title}}</h2>
	<p>{{module.description}}</p>

	<a href="{{content_by_id(module.link.url.content_id).absolute_url}}" class="btn">{{module.link_text}}</a>
{% endmacro %}
  
	<div class="cta-block">
    <div class="container">
      {% if module.alignment == 'image_right' %}

        <div class="row mobile-flip-lg">
          <div class="col-4 col-lg-12 col-md-12">
            <div class="cta-block-content">
							{{renderContent()}}
            </div>
          </div>
          <div class="col-6 push-2 col-lg-12 push-lg-hide col-md-12">
						{{renderImage()}}
          </div>
        </div>

      {% else %}
          <div class="row ">
            <div class="col-6 col-lg-12">
							{{renderImage()}}
            </div>
            <div class="col-4 push-1 col-lg-12 push-lg-hide col-md-12">
              <div class="cta-block-content">
								{{renderContent()}}
              </div>
            </div>
          </div>
        {% endif %}
    </div>
</div>

And a BlogPost component where you can select up to 3 specific blog posts to display on the page

{% macro createPost(post) %}
	{% set content = content_by_id(post.post) %}
	<div class="insights-card {{isFeat}}">
		{{renderTag(content,post)}}
    <a class="insights-card-img-link" href="{{content.slug}}">
       <div class="insights-card-img {{isFeat}}" style="background-image:url({{content.featured_image}})"></div>
		    <p>{{content.title}}</p>
    </a>
		{{renderButton(content,post)}}
	</div>
{% endmacro %}

{% macro renderButton(content, post) %}
	{% set linkText = post.custom_link_text ? post.link.link_text : 'Read Now' %}
	{% set getLinkClass = post.custom_link_text && post.link.link_style ? post.link.link_style : '' %}
	{% set linkClass = getLinkClass == 'pill' ? 'btn' : '' %}
  <a href="{{content.slug}}" class="{{linkClass}}">{{linkText}}</a>
{% endmacro %}


{% macro renderTag(content) %} 
	<p class="mono">{{post.category}}</p>
{% endmacro %}


<div class="insights">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="insights-title">
          <h2>{{module.title}}</h2>
        </div>
      </div>
    </div>
    <div class="row">
      {% for post in module.post %}
      <div class="{{ loop.index == 1 ? "col-6" : "col-3 col-lg-6"}} col-lg-12 ">
        {{createPost(post)}}
      </div>

      {% endfor %}
    </div>
  </div>
</div>

The issue I am having is that the BlogPost component doesn’t load a post depending on how many  CTA Blocks are above it  but works perfectly fine if i remove the CTA Blocks or move the blogpost component above the Cta Block. Does anyone have any idea on why that would happen?

[Jaycee_Lewis]

Hi, @TCS1 👋 Thank you for including those details. Hey @WGwardjak @webdew @dbeau79 @Gonzalo do you have any insight for @TCS1?

Thank you very much! — Jaycee