Reduce card border thickness on mobile

Breakpoint was selected based on manual testing on real-world devices, DevTools simulation does not accurately reflect the excessive thickness that is apparent on a real screen.

diff --git a/style.css b/style.css
index 7fd9960fe4d21932e439df7d369b99181361484b..26a9608a57eb571137e5498188c61533a54fa99c 100644 (file)
--- a/style.css
+++ b/style.css
@@ -307,10 +307,10 @@ td {
   content: "";
   position: absolute;
   z-index: -1;
-  top: -6px;
-  left: -6px;
-  width: calc(100% + 12px);
-  height: calc(100% + 12px);
+  top: -4px;
+  left: -4px;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
   border-radius: 18px;
   --shade: 50% 70%;
   background: conic-gradient(hsl(360deg var(--shade)),
@@ -332,6 +332,15 @@ td {
   transition: opacity 400ms;
 }
 
+@media (min-width: 370px) {
+  .card::before {
+    top: -6px;
+    left: -6px;
+    width: calc(100% + 12px);
+    height: calc(100% + 12px);
+  }
+}
+
 .subtitle {
   margin-block: -8px;
   font-size: 0.875em;