Map disappears on screen sizes less than tailwinds lg breakpoint

[IzakJackson]

Not sure what's happening with it, but everything I try, it just seems to either not render or render under/over the other column.

Any help would be much appreciated!

<div class="bg-black py-24 sm:py-32">
    <div class="mx-auto max-w-7xl px-6 lg:px-8">
      <div class="mx-auto max-w-2xl lg:mx-0 lg:max-w-none">
        <div class="grid grid-cols-1 gap-8 lg:gap-16 text-base leading-7 text-white max-w-none lg:grid-cols-2">
          <div class="relative">
            <MapboxMap
              map-id="locationMap"
              class="w-full h-96 rounded-3xl"
              :options="{
                style: 'mapbox://styles/mapbox/dark-v11', // style URL
                center: [blok.latitude, blok.longitude], // starting position
                zoom: 14, // starting zoom
              }"
            >
              <MapboxNavigationControl
                position="top-right"
                :options="{
                  showCompass: false,
                }"
              />
              <MapboxDefaultMarker
                class="text-lft-400"
                :options="{
                  color: '#ffcd16',
                }"
                :lnglat="[blok.latitude, blok.longitude]"
                marker-id="marker1"
              >
              </MapboxDefaultMarker>
            </MapboxMap>
          </div>
          <div class="relative">
            <h2 class="text-3xl text-white font-extrabold tracking-tight text-wite sm:text-4xl">
              {{ blok.heading }}
            </h2>
            <p class="mt-6 text-xl font-medium leading-8 text-neutral-300">{{ blok.lead }}</p>
            <dl class="mt-10 space-y-4 text-base leading-7 text-neutral-300">
              <div class="flex gap-x-4">
                <dt class="flex-none">
                  <span class="sr-only">Address</span>
                  <span class="i-heroicons-building-office-2 text-lft-400 h-6 w-6"></span>
                </dt>
              </div>
              <div class="flex gap-x-4">
                <dt class="flex-none">
                  <span class="sr-only">What Three Word</span>
                  <span class="text-red-500 font-bold text-lg mx-0.5">///</span>
                </dt>
              </div>
              <div class="flex gap-x-4">
                <dt class="flex-none">
                  <span class="sr-only">Telephone</span>
                  <span class="i-heroicons-phone text-lft-400 h-6 w-6"></span>
                </dt>
                <dd>
                </dd>
              </div>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>

Above LG Works:

Below LG doesn't:

[AlexLavoie42]

Could you please create a reproduction by forking the playground and provide a link? Would help me a lot in looking into the issue.

[IzakJackson]

Playground

The map is covering the h2 tag in the grid.

[IzakJackson]

A workaround has been to add margin to the top of the 2nd grid element then remove it at screen sizes above lg. Seems to be an issue around the positioning of the