[SOLVED] Tailwind media queries don't work properly on Safari

I've done some research but can't find anything that relates to an issue I am having. I am using Tailwind, Typescript, and Next JS. My app works fine on Chrome, but I am having an issue with all my media queries where all the mobile breakpoints appear while viewing in desktop view.

For example, on my about page when viewing on Safari it shows my div with all elements within as a flex column and all text and the image centered inside. This is supposed to be the mobile view, where as chrome shows it as normal as a row without any text centered. Anyone know what this could be? Does Safari not sync well with Tailwind?

Chrome:

Safari:

about.tsx

// PLUGINS
import { motion } from "framer-motion"

// COMPONENTS
import Image from 'next/image';

// ABOUT
export default function About() {
    return (
        <div className="flex justify-center items-center w-full pt-20 pb-10 bg-gradient-to-b from-zinc-800 to-zinc-600">
            <motion.div className="w-11/12 max-w-[1200px] bg-zinc-800 text-white p-5 gap-5 flex justify-center items-center sm:flex-row flex-col shadow-2xl border border-white-200" initial={{ opacity: 0 }} whileInView={{ opacity: 1, transition: { duration: 2.5 } }} viewport={{ once: true }}>
            <div className="w-[1600px] bg-cover h-[400px] [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] hidden sm:block"  style={{ backgroundImage: "url('/imgs/david_closeup.jpg')", backgroundPositionX: "50%"}}></div>
                <Image
                    src="/imgs/david_closeup.jpg" 
                    alt="Image of David Glass"
                    width={320}            
                    height={160}              
                    className="block sm:hidden object-cover [mask-image:linear-gradient(to_right,transparent,black_20%,black_80%,transparent)] w-md sm:w-sm"
                    priority // Improves LCP by preloading
                /> 
                <div className="flex flex-col sm:text-left text-center overflow-hidden">
                    <h1 className="text-2xl px-5 font-thin">About</h1> 
                    <h2 className="font-bold text-xl px-5 pt-5">A TITLE</h2> 
                    <motion.p className="px-5 py-5" initial={{ y: 100 }} whileInView={{ y: 0, transition: { duration: 1 } }} viewport={{ once: true }}>Versatile in many forms of music making, David Glass has
                        THIS IS TEXT 
                    </motion.p> 
                </div> 
            </motion.div>
        </div>
    );
}

tailwind.config.ts

import type { Config } from "tailwindcss";

export default {
    darkMode: ["class"],
    content: [
    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
        animation: {
            marquee: "marquee 5s linear infinite",
          },
          keyframes: {
            marquee: {
              "0%": { transform: "translateX(0)" },
              "100%": { transform: "translateX(-100%)" }, 
            },
          },
        colors: {
            background: 'hsl(var(--background))',
            foreground: 'hsl(var(--foreground))',
            card: {
                DEFAULT: 'hsl(var(--card))',
                foreground: 'hsl(var(--card-foreground))'
            },
            popover: {
                DEFAULT: 'hsl(var(--popover))',
                foreground: 'hsl(var(--popover-foreground))'
            },
            primary: {
                DEFAULT: 'hsl(var(--primary))',
                foreground: 'hsl(var(--primary-foreground))'
            },
            secondary: {
                DEFAULT: 'hsl(var(--secondary))',
                foreground: 'hsl(var(--secondary-foreground))'
            },
            muted: {
                DEFAULT: 'hsl(var(--muted))',
                foreground: 'hsl(var(--muted-foreground))'
            },
            accent: {
                DEFAULT: 'hsl(var(--accent))',
                foreground: 'hsl(var(--accent-foreground))'
            },
            destructive: {
                DEFAULT: 'hsl(var(--destructive))',
                foreground: 'hsl(var(--destructive-foreground))'
            },
            border: 'hsl(var(--border))',
            input: 'hsl(var(--input))',
            ring: 'hsl(var(--ring))',
            chart: {
                '1': 'hsl(var(--chart-1))',
                '2': 'hsl(var(--chart-2))',
                '3': 'hsl(var(--chart-3))',
                '4': 'hsl(var(--chart-4))',
                '5': 'hsl(var(--chart-5))'
            }
        },
        borderRadius: {
            lg: 'var(--radius)',
            md: 'calc(var(--radius) - 2px)',
            sm: 'calc(var(--radius) - 4px)'
        }
    }
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config;

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  /* font-family: Arial, Helvetica, sans-serif; */
}

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

.MyGradient {
  mask-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 1) 20%,
    rgba(0, 0, 0, 1) 90%,
    rgba(0, 0, 0, 0)
  );
}