Why are images not showing until the window is resized? - image

Question

I am utilizing the modal from Zurb Foundation and some Liquid. Running into a strange issue. Images in the modal are being rendered to the DOM, but only show up when the screen is resized either smaller or larger.
Here is the code I am working with (yes, some elements have in-line styles specified).
<div class="grid-x align-middle grid-margin-x grid-margin-y small-up-1 medium-up-2 large-up-3 padding text-center">
{% for item in this.items %}
<div data-open="wa-project-{{forloop.index}}" class="cell" style="background-image:url('{{item['Image1']}}?mode=max&height=270'); height: 270px; width: 340px; background-size:cover; background-position:center; background-color:#00577d; margin: 12px auto;">
<div class="grid-y" style="height:270px; width:100%; background-color:rgba(0,25,36,.5)">
<div class="cell auto"></div>
<div class="cell shrink padding">
<div><a class="color-white" alt="{{item['Name']}} link">{{item['Name']}}</a></div>
<hr style="width: 125px; margin: 20px auto 0 auto; border-top-color: #8dd535">
</div>
<div class="cell auto"></div>
</div>
</div>
<!-- Modal -->
<div class="reveal" id="wa-project-{{forloop.index}}" data-reveal data-animation-in="scale-in-up" data-overlay="true">
<div class="orbit" role="region" aria-label="GoMedia Projects" data-orbit>
<div class="orbit-controls">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</button>
</div>
<ul class="orbit-container">
{% if item.image1 != "" %}
<li class="orbit-slide is-active">
<figure class="orbit-figure">
<img class="orbit-image" src="{{item.image1}}?mode=max&width=600" alt="space">
</figure>
</li>
{% endif %}
{% if item.image2 != "" %}
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="{{item['Image2']}}?mode=max&width=600" alt="Space">
</figure>
</li>
{% endif %}
{% if item.image3 != "" %}
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="{{item['Image3']}}?mode=max&width=600" alt="Space">
</figure>
</li>
{% endif %}
{% if item.image4 != "" %}
<li class="orbit-slide">
<figure class="orbit-figure">
<img class="orbit-image" src="{{item['Image4']}}?mode=max&width=600" alt="Space">
</figure>
</li>
{% endif %}
</ul>
</div>
<h2 class="fontsize-30">{{item.name}}</h2>
<hr style="width: 100%; border-top-color: #8dd535">
<p>{{item.description}}</p>
<button class="close-button" data-close aria-label="Close modal" type="button">
<i class="fas fa-times-circle"></i>
</button>
</div>
{% endfor %}
</div>
I've been researching for a bit, but have not found an answer. A height and width is specified for the images in the CSS. I am seeing it happen across multiple browsers: Firefox, Chrome, Safari. I have even tried starting from scratch with the Zurb Foundation template for the modal to no avail.