Overlapping images before refresh / on some browsers

Question

I followed and altered a tutorial for a landing page. I have had an issue where sometimes the first time the website loads on a browser it shows overlapping images, but if I refresh the browser or flip the screen (on mobile) it looks fine. The responsive dev tools also show it working fine on any browser.

I have tried altering the items shown per page in the JavaScript and playing with the tags img-fluid and image responsive.

let toggle = document.querySelector("#header .toggle-button");
let collapse = document.querySelectorAll("#header .collapse");

toggle.addEventListener('click', function() {
  collapse.forEach(col => col.classList.toggle("collapse-toggle"));
})

// with masonry
new Masonry("#posts .grid", {
  itemSelector: '.grid-item',
  gutter: 20
});

// swiper libray initialization
new Swiper('.swiper-container', {
  direction: 'horizontal',
  loop: true,
  slidesPerView: 9,
  autoplay: {
    delay: 3000
  },
  // responsive breakpoints
  breakpoints: {
    '@0': {
      slidesPerView: 1

    },
    // 888px
    '@1.00': {
      slidesPerView: 1
    },
    // 1110px
    '@1.25': {
      slidesPerView: 2
    },
    // 1330px
    '@1.50': {
      slidesPerView: 3
    }
  }
})

// Sticky Navigation
window.onscroll = function() {
  myFunction()
};

// get the current value 
let navbar = document.getElementById("header");

// get the navbar position
let sticky = navbar.offsetTop;

// sticky function
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky");
  } else {
    navbar.classList.remove("sticky");
  }
}

@media (max-width: 768px) {
  .grid .grid-item {
    width: calc(50% - 20px);
  }
  .col-3 {
    flex: 0 0 100%;
    max-width: calc(100% - 50px);
    padding-top: 40px 50px;
  }
}

@media (max-width: 574px) {
  .toggle-button {
    display: initial;
  }
  .collapse {
    max-height: 0;
    overflow: hidden;
    transition: all 0.8s cubic-bezier(0.51, -0.15, 0, 0.98);
  }
  .collapse .nav-link {
    display: block;
    text-align: center;
  }
  .search-box {
    border-right: none;
  }
  .collapse-toggle {
    max-height: 500px;
  }
  .grid .grid-item {
    width: calc(100% - 20px);
  }
  #site-main {
    margin-top: 6em;
  }
}

!--main site-->
<main id="site-main">

  <!-- Blog Post Section -->
  <section id="posts">
    <div class="container">
      <div class="grid">

        <!-- article -->
        <div class="grid-item">
          <article class="article">
            <div class="card">
              <div class="overflow-img">
                <a href="#">
                  <img src="./Assets/IMG-1921.jpg" class="img-fluid" alt="">
                </a>
              </div>
              <div class="card-body text-center px-1">
                <a href="#" class="text-title display-1 text-dark">
                                        Welcome to TylerTeacher.com
                                    </a>
                <p class="secondary-title text-secondary display-3">
                  <span><i class="far fa-clock text-primary"></i> Clock Wed 02, 2021</span>
                  <span><i class="far fa-comments text-primary"></i> 12</span>
                </p>
              </div>
            </div>
          </article>
        </div>