diff --git a/.changeset/icy-cars-camp.md b/.changeset/icy-cars-camp.md
new file mode 100644
index 0000000000..c020925274
--- /dev/null
+++ b/.changeset/icy-cars-camp.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Updates our usage of aspect-ratio to use the tailwind plugin in order to support older browsers.
diff --git a/core/package.json b/core/package.json
index 195c6c7c6b..ba2785038f 100644
--- a/core/package.json
+++ b/core/package.json
@@ -92,7 +92,6 @@
     "eslint": "^8.57.1",
     "eslint-config-next": "15.2.3",
     "postcss": "^8.5.4",
-    "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-preset-env": "^10.2.1",
     "prettier": "^3.5.3",
     "prettier-plugin-tailwindcss": "^0.6.12",
diff --git a/core/postcss.config.js b/core/postcss.config.js
index 0fd94f85cd..0f811007c5 100644
--- a/core/postcss.config.js
+++ b/core/postcss.config.js
@@ -14,6 +14,5 @@ module.exports = {
         'gap-properties': true,
       },
     },
-    'postcss-aspect-ratio-polyfill': {},
   },
 };
diff --git a/core/tailwind.config.js b/core/tailwind.config.js
index d22f55cd1c..58cd1fb9e0 100644
--- a/core/tailwind.config.js
+++ b/core/tailwind.config.js
@@ -228,12 +228,16 @@ const config = {
       },
     },
   },
+  corePlugins: {
+    aspectRatio: false,
+  },
   plugins: [
     // @ts-ignore
     require('tailwindcss-radix')(),
     require('tailwindcss-animate'),
     require('@tailwindcss/container-queries'),
     require('@tailwindcss/typography'),
+    require('@tailwindcss/aspect-ratio'),
   ],
 };
 
diff --git a/core/vibes/soul/form/card-radio-group/index.tsx b/core/vibes/soul/form/card-radio-group/index.tsx
index cbe6f44a24..f6e36da73d 100644
--- a/core/vibes/soul/form/card-radio-group/index.tsx
+++ b/core/vibes/soul/form/card-radio-group/index.tsx
@@ -93,7 +93,7 @@ export const CardRadioGroup = React.forwardRef<
               value={option.value}
             >
               {option.image && (
-                <div className="relative aspect-square h-full">
+                <div className="aspect-h-1 aspect-w-1 relative h-full">
                   <Image
                     alt={option.image.alt}
                     className="bg-background object-fill"
diff --git a/core/vibes/soul/primitives/blog-post-card/index.tsx b/core/vibes/soul/primitives/blog-post-card/index.tsx
index d608a19913..cce0d423a7 100644
--- a/core/vibes/soul/primitives/blog-post-card/index.tsx
+++ b/core/vibes/soul/primitives/blog-post-card/index.tsx
@@ -32,7 +32,7 @@ export function BlogPostCard({ blogPost, className }: Props) {
       )}
       href={href}
     >
-      <div className="relative mb-4 aspect-[4/3] w-full overflow-hidden rounded-2xl bg-contrast-100">
+      <div className="aspect-h-3 aspect-w-4 relative mb-4 w-full overflow-hidden rounded-2xl bg-contrast-100">
         {image?.src != null && image.src !== '' ? (
           <Image
             alt={image.alt}
@@ -71,7 +71,7 @@ export function BlogPostCardSkeleton({ className }: { className?: string }) {
   return (
     <div className={clsx('flex max-w-md animate-pulse flex-col gap-2 rounded-xl', className)}>
       {/* Image */}
-      <div className="aspect-[4/3] overflow-hidden rounded-xl bg-contrast-100" />
+      <div className="aspect-h-3 aspect-w-4 overflow-hidden rounded-xl bg-contrast-100" />
 
       {/* Title */}
       <div className="h-4 w-24 rounded-lg bg-contrast-100" />
diff --git a/core/vibes/soul/primitives/compare-drawer/index.tsx b/core/vibes/soul/primitives/compare-drawer/index.tsx
index b55a57b4bd..83ac25cff4 100644
--- a/core/vibes/soul/primitives/compare-drawer/index.tsx
+++ b/core/vibes/soul/primitives/compare-drawer/index.tsx
@@ -163,7 +163,7 @@ export function CompareDrawer({
                     className="group relative flex max-w-56 items-center overflow-hidden whitespace-nowrap rounded-xl border border-[var(--compare-drawer-link-border,hsl(var(--contrast-100)))] bg-[var(--compare-drawer-card-background,hsl(var(--background)))] font-semibold ring-[var(--compare-drawer-card-focus,hsl(var(--primary)))] transition-all duration-150 hover:bg-[var(--compare-drawer-card-background-hover,hsl(var(--contrast-100)))] focus:outline-none focus:ring-2"
                     href={item.href}
                   >
-                    <div className="relative aspect-square w-12 shrink-0 bg-[var(--compare-drawer-card-image-background,hsl(var(--contrast-100)))]">
+                    <div className="aspect-h-1 aspect-w-1 relative w-12 shrink-0 bg-[var(--compare-drawer-card-image-background,hsl(var(--contrast-100)))]">
                       {item.image?.src != null ? (
                         <Image
                           alt={item.image.alt}
diff --git a/core/vibes/soul/primitives/product-card/index.tsx b/core/vibes/soul/primitives/product-card/index.tsx
index 7ea68f3e2c..d27af0d1e8 100644
--- a/core/vibes/soul/primitives/product-card/index.tsx
+++ b/core/vibes/soul/primitives/product-card/index.tsx
@@ -74,9 +74,9 @@ export function ProductCard({
           className={clsx(
             'relative overflow-hidden rounded-xl @md:rounded-2xl',
             {
-              '5:6': 'aspect-[5/6]',
-              '3:4': 'aspect-[3/4]',
-              '1:1': 'aspect-square',
+              '5:6': 'aspect-h-6 aspect-w-5',
+              '3:4': 'aspect-h-4 aspect-w-3',
+              '1:1': 'aspect-h-1 aspect-w-1',
             }[aspectRatio],
             {
               light: 'bg-[var(--product-card-light-background,hsl(var(--contrast-100)))]',
@@ -193,9 +193,9 @@ export function ProductCardSkeleton({
         className={clsx(
           'rounded-xl @md:rounded-2xl',
           {
-            '5:6': 'aspect-[5/6]',
-            '3:4': 'aspect-[3/4]',
-            '1:1': 'aspect-square',
+            '5:6': 'aspect-h-6 aspect-w-5',
+            '3:4': 'aspect-h-4 aspect-w-3',
+            '1:1': 'aspect-h-1 aspect-w-1',
           }[aspectRatio],
         )}
       />
diff --git a/core/vibes/soul/sections/blog-post-content/index.tsx b/core/vibes/soul/sections/blog-post-content/index.tsx
index fa88beadbb..b0d0cd7bb9 100644
--- a/core/vibes/soul/sections/blog-post-content/index.tsx
+++ b/core/vibes/soul/sections/blog-post-content/index.tsx
@@ -81,7 +81,7 @@ export function BlogPostContent({
                 {image?.src != null && image.src !== '' && (
                   <Image
                     alt={image.alt}
-                    className="mb-8 aspect-video w-full rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16"
+                    className="aspect-h-9 aspect-w-16 mb-8 w-full rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16"
                     height={780}
                     src={image.src}
                     width={1280}
@@ -129,7 +129,7 @@ function BlogPostTagsSkeleton() {
 
 function BlogPostImageSkeleton() {
   return (
-    <div className="mb-8 aspect-video w-full animate-pulse rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16">
+    <div className="aspect-h-9 aspect-w-16 mb-8 w-full animate-pulse rounded-2xl bg-contrast-100 object-cover @2xl:mb-12 @4xl:mb-16">
       <div className="h-full w-full" />
     </div>
   );
diff --git a/core/vibes/soul/sections/cart/client.tsx b/core/vibes/soul/sections/cart/client.tsx
index 6b8c4c5e85..2d6c4d2ba3 100644
--- a/core/vibes/soul/sections/cart/client.tsx
+++ b/core/vibes/soul/sections/cart/client.tsx
@@ -290,7 +290,7 @@ export function CartClient<LineItem extends CartLineItem>({
               className="flex flex-col items-start gap-x-5 gap-y-4 @container @sm:flex-row"
               key={lineItem.id}
             >
-              <div className="relative aspect-square w-full max-w-24 overflow-hidden rounded-xl bg-[var(--cart-image-background,hsl(var(--contrast-100)))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cart-focus,hsl(var(--primary)))] focus-visible:ring-offset-4">
+              <div className="aspect-h-1 aspect-w-1 relative w-full max-w-24 overflow-hidden rounded-xl bg-[var(--cart-image-background,hsl(var(--contrast-100)))] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--cart-focus,hsl(var(--primary)))] focus-visible:ring-offset-4">
                 <Image
                   alt={lineItem.image.alt}
                   className="object-cover"
diff --git a/core/vibes/soul/sections/cart/index.tsx b/core/vibes/soul/sections/cart/index.tsx
index 56c6e49b64..e24921e823 100644
--- a/core/vibes/soul/sections/cart/index.tsx
+++ b/core/vibes/soul/sections/cart/index.tsx
@@ -90,7 +90,7 @@ export function CartSkeleton({
                 key={index}
               >
                 {/* Image */}
-                <Skeleton.Box className="aspect-square w-full max-w-24 rounded-xl" />
+                <Skeleton.Box className="aspect-h-1 aspect-w-1 w-full max-w-24 rounded-xl" />
                 <div className="flex grow flex-col flex-wrap justify-between gap-y-2 @xl:flex-row">
                   <div className="flex w-full flex-1 flex-col @xl:w-1/2 @xl:pr-4">
                     {/* Line Item Title */}
diff --git a/core/vibes/soul/sections/order-details-section/index.tsx b/core/vibes/soul/sections/order-details-section/index.tsx
index 4b0e76a516..849d360527 100644
--- a/core/vibes/soul/sections/order-details-section/index.tsx
+++ b/core/vibes/soul/sections/order-details-section/index.tsx
@@ -312,7 +312,7 @@ function ShipmentLineItem({ lineItem }: { lineItem: ShipmentLineItem }) {
 
   return (
     <LineItemWrapper>
-      <div className="relative aspect-square basis-40 overflow-hidden rounded-[inherit] border border-[var(--order-details-section-border,hsl(var(--contrast-100)))] bg-[var(--order-details-section-image-background,hsl(var(--contrast-100)))]">
+      <div className="aspect-h-1 aspect-w-1 relative basis-40 overflow-hidden rounded-[inherit] border border-[var(--order-details-section-border,hsl(var(--contrast-100)))] bg-[var(--order-details-section-image-background,hsl(var(--contrast-100)))]">
         {lineItem.image?.src != null ? (
           <Image
             alt={lineItem.image.alt}
@@ -361,7 +361,7 @@ function ShipmentLineItem({ lineItem }: { lineItem: ShipmentLineItem }) {
 function ShipmentLineItemSkeleton() {
   return (
     <div className="group grid shrink-0 gap-8 rounded-xl @sm:flex @sm:rounded-2xl">
-      <div className="relative aspect-square basis-40 overflow-hidden rounded-[inherit]">
+      <div className="aspect-h-1 aspect-w-1 relative basis-40 overflow-hidden rounded-[inherit]">
         <Skeleton.Box className="h-full w-full" />
       </div>
 
diff --git a/core/vibes/soul/sections/product-detail/index.tsx b/core/vibes/soul/sections/product-detail/index.tsx
index d3e27b7de8..a2fcee488b 100644
--- a/core/vibes/soul/sections/product-detail/index.tsx
+++ b/core/vibes/soul/sections/product-detail/index.tsx
@@ -210,7 +210,7 @@ function ProductGallerySkeleton() {
     <Skeleton.Root className="group-has-[[data-pending]]/product-gallery:animate-pulse" pending>
       <div className="w-full overflow-hidden rounded-xl @xl:rounded-2xl">
         <div className="flex">
-          <Skeleton.Box className="aspect-[4/5] h-full w-full shrink-0 grow-0 basis-full" />
+          <Skeleton.Box className="aspect-h-5 aspect-w-4 h-full w-full shrink-0 grow-0 basis-full" />
         </div>
       </div>
       <div className="mt-2 flex max-w-full gap-2 overflow-x-auto">
diff --git a/core/vibes/soul/sections/product-detail/product-gallery.tsx b/core/vibes/soul/sections/product-detail/product-gallery.tsx
index 4567bc5b80..264a0c23db 100644
--- a/core/vibes/soul/sections/product-detail/product-gallery.tsx
+++ b/core/vibes/soul/sections/product-detail/product-gallery.tsx
@@ -78,17 +78,17 @@ export function ProductGallery({
               className={clsx(
                 'relative w-full shrink-0 grow-0 basis-full',
                 {
-                  '5:6': 'aspect-[5/6]',
-                  '3:4': 'aspect-[3/4]',
-                  '4:5': 'aspect-[4/5]',
-                  '3:2': 'aspect-[3/2]',
-                  '2:3': 'aspect-[2/3]',
-                  '16:9': 'aspect-[16/9]',
-                  '9:16': 'aspect-[9/16]',
-                  '6:5': 'aspect-[6/5]',
-                  '5:4': 'aspect-[5/4]',
-                  '4:3': 'aspect-[4/3]',
-                  '1:1': 'aspect-square',
+                  '5:6': 'aspect-h-6 aspect-w-5',
+                  '3:4': 'aspect-h-4 aspect-w-3',
+                  '4:5': 'aspect-h-5 aspect-w-4',
+                  '3:2': 'aspect-h-2 aspect-w-3',
+                  '2:3': 'aspect-h-3 aspect-w-3',
+                  '16:9': 'aspect-h-9 aspect-w-16',
+                  '9:16': 'aspect-h-16 aspect-w-9',
+                  '6:5': 'aspect-h-5 aspect-w-6',
+                  '5:4': 'aspect-h-4 aspect-w-5',
+                  '4:3': 'aspect-h-3 aspect-w-4',
+                  '1:1': 'aspect-h-1 aspect-w-1',
                 }[aspectRatio],
               )}
               key={idx}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6937f5e599..dc34a8867c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -261,9 +261,6 @@ importers:
       postcss:
         specifier: ^8.5.4
         version: 8.5.4
-      postcss-aspect-ratio-polyfill:
-        specifier: ^2.0.0
-        version: 2.0.0
       postcss-preset-env:
         specifier: ^10.2.1
         version: 10.2.1(postcss@8.5.4)
@@ -6144,9 +6141,6 @@ packages:
   nth-check@2.1.1:
     resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==}
 
-  number-precision@1.6.0:
-    resolution: {integrity: sha512-05OLPgbgmnixJw+VvEh18yNPUo3iyp4BEWJcrLu4X9W05KmMifN7Mu5exYvQXqxxeNWhvIF+j3Rij+HmddM/hQ==}
-
   nuqs@2.4.3:
     resolution: {integrity: sha512-BgtlYpvRwLYiJuWzxt34q2bXu/AIS66sLU1QePIMr2LWkb+XH0vKXdbLSgn9t6p7QKzwI7f38rX3Wl9llTXQ8Q==}
     peerDependencies:
@@ -6454,10 +6448,6 @@ packages:
     resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==}
     engines: {node: '>= 0.4'}
 
-  postcss-aspect-ratio-polyfill@2.0.0:
-    resolution: {integrity: sha512-+C385VUUrF6cnopov6VfsaAYojN0HImyVwSpTQ1gGm1A0Y347sDFE6QQPcjbGyVP9M5dCSretPC5fv1jUjuDPQ==}
-    engines: {node: '>=10.0.0'}
-
   postcss-attribute-case-insensitive@7.0.1:
     resolution: {integrity: sha512-Uai+SupNSqzlschRyNx3kbCTWgY/2hcwtHEI/ej2LJWc9JJ77qKgGptd8DHwY1mXtZ7Aoh4z4yxfwMBue9eNgw==}
     engines: {node: '>=18'}
@@ -14519,8 +14509,6 @@ snapshots:
     dependencies:
       boolbase: 1.0.0
 
-  number-precision@1.6.0: {}
-
   nuqs@2.4.3(next@15.4.0-canary.0(@babel/core@7.27.4)(@playwright/test@1.52.0)(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react@19.1.0):
     dependencies:
       mitt: 3.0.1
@@ -14821,10 +14809,6 @@ snapshots:
 
   possible-typed-array-names@1.0.0: {}
 
-  postcss-aspect-ratio-polyfill@2.0.0:
-    dependencies:
-      number-precision: 1.6.0
-
   postcss-attribute-case-insensitive@7.0.1(postcss@8.5.4):
     dependencies:
       postcss: 8.5.4