{{-- product-mediafiles for mobile only --}}
  <div class="lg:hidden product-mediafiles-container-mobile uppercase p-4">
    <div class="product-available-images-container mt-10 pt-5 border-t-2 border-gray-400 w-full">
        <div class="size-heading tracking-widest">images:</div>
        <div class="sizes-available mt-3 flex gap-3 flex-wrap">
            {{-- use loop to mimic sizes available for this product --}}
            @foreach (range(1,5) as $item)
                <img src="/images/collections-photos/collection1.jpg" alt=""
                    class="w-20 lg:max-w-[5vw] lg:max-h-[10vw]">
            @endforeach

        </div>
    </div>

    <div class="product-available-videos-container  my-4 w-full">
        <div class="size-heading tracking-widest">Videos:</div>
        <div class="sizes-available mt-3 flex gap-3 flex-wrap">
            {{-- use loop to mimic sizes available for this product --}}
            @foreach (['xs', 's'] as $item)
                <img src="/images/collections-photos/collection1.jpg" alt=""
                    class="w-20 lg:max-w-[5vw] lg:max-h-[10vw]">
            @endforeach

        </div>
    </div>
</div>