I have certain images hidden when the screen switches from desktop to mobile within ReactJS/Tailwind by doing:

<div className="flex shrink flex-row justify-between w-[60%] h-[25%] sm:w-[95%] sm:h-[52%] mb-[-10px] mt-[-15px] lg:mt-0">
                <img src={images.screen1d} className=" flex mx-auto lg:h-[105%] h-[115%] hover:scale-110 duration-500 cursor-pointer"/>
                <video autoPlay muted loop className=" hidden lg:block flex mx-auto rounded-xl hover:scale-110 duration-500 cursor-pointer">
                    <source src={images.screen3} type="video/mp4" ></source>
                </video>
                <img src={images.screen2} className=" flex lg:h-[105%] h-[115%] mx-auto hover:scale-110 duration-500 cursor-pointer" />
            </div>

More specifically, this line in particular:

<video autoPlay muted loop className=" hidden lg:block flex mx-auto rounded-xl hover:scale-110 duration-500 cursor-pointer">

What I assume happens is that the video is hidden from all screen sizes minus large ones, hence lg:block; this is true for my laptop and desktop, as well as mobile phone, however, when I open the same window in Safari, it still displays the video, regardless of the dimensions of the Safari window (nothing disappears when I shrink the window, and even when I enlarge it, everything is pushed off of the page). I've tried swapping lg out with md, sm, even modifying the minimum width that lg specifies to a higher number, such as 1300px, and it still doesn't hide it on the browser.

This is exclusively for Safari, works fine on every other browser.

EDIT: I've noticed that when I decrease the browser's dimensions in, say, chrome, the div that contains the img/video containers shrink with it as far as they can, until video disappears. This, however, is NOT the case with Safari, it doesn't shrink what so ever to attempt to fit each image, it just pushes it off the page entirely.

What it looks like on Safari (Desktop):

Every other browser: