diff --git a/src/app.css b/src/app.css
index 76a7c72c..f2443d98 100644
--- a/src/app.css
+++ b/src/app.css
@@ -295,7 +295,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
         video,
         img,
         audio {
-          min-height: 88px; /* for extreme dimensions */
+          min-height: var(--pointer-min-dimension); /* for extreme dimensions */
         }
       }
     }
diff --git a/src/components/status.css b/src/components/status.css
index 5b965237..59676de6 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -908,7 +908,7 @@
   grid-auto-rows: 1fr;
   gap: 2px;
   /* height: 160px; */
-  min-height: 88px;
+  min-height: var(--pointer-min-dimension);
   height: auto;
   max-height: max(160px, 33vh);
 }
@@ -1037,9 +1037,9 @@
 .status .media-container.media-eq1 .media {
   display: inline-block;
   max-width: 100% !important;
-  min-width: 88px;
+  min-width: var(--pointer-min-dimension);
   /* width: auto; */
-  min-height: 88px;
+  min-height: var(--pointer-min-dimension);
   /* --maxAspectHeight: max(160px, 33vh);
   --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
   width: min(var(--aspectWidth), var(--width), 100%);
@@ -1300,7 +1300,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
 :is(.status, .media-post) .media-audio {
   width: 100%;
   height: 100%;
-  min-height: 88px;
+  min-height: var(--pointer-min-dimension);
   background-image: radial-gradient(
       circle at center center,
       transparent,
diff --git a/src/index.css b/src/index.css
index 7025ae9f..fbe09b52 100644
--- a/src/index.css
+++ b/src/index.css
@@ -96,6 +96,14 @@
 
   --timing-function: cubic-bezier(0.3, 0.5, 0, 1);
   --spring-timing-funtion: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
+  --pointer-min-dimension: 88px;
+}
+
+@media (pointer: fine) {
+  :root {
+    --pointer-min-dimension: 44px;
+  }
 }
 
 @media (min-resolution: 2dppx) {