update admin page

_includes/styles/base.css

@@ -316,7 +316,6 @@ card-container {
     display: grid;
     gap: 1.2rem;
     grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
-    margin-bottom: 1.5rem;
 
     card-entry {
         background-color: var(--background-secondary);

_includes/styles/pages/admins.css

@@ -7,7 +7,7 @@
 /  ╰─────────────────────────────────────╯
 /  admins - styling the admin cards on the admins page (admin.md) */
 
-#admins section .card {
+article#admins card-container card-entry {
     overflow: hidden;
     position: relative;
 
@@ -15,74 +15,66 @@
         z-index: 100;
     }
 
-    .sona {
+    buttons-container {
+        margin-top: 0;
+        margin-bottom: 5rem;
+    }
+
+    img[sona] {
         bottom: -3rem;
-        max-width: 20rem;
+        max-width: 18rem;
         opacity: .5;
+        pointer-events: none;
         position: absolute;
         right: -.5rem;
         transform: rotate(16deg) scaleX(-1);
         transition: 0.2s;
-
-        &:hover {
-            opacity: 1;
-            transition: 0.2s;
-        }
     }
 
-    &.sneexy {
+    &#sneexy {
         --accent: #65ff88;
     }
 
-    &.senil {
+    &#senil {
         --accent: #008E54;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
 
-        .sona {
-            bottom: -9rem;
+        img[sona] {
+            bottom: -7rem;
         }
     }
 
-    &.unnick {
+    &#unnick {
         --accent: #0094FF;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
 
-        .sona {
+        img[sona] {
             bottom: -2rem;
         }
     }
 
-    &.melontini {
+    &#zenfyr {
         --accent: #e05188;
 
-        .button-container .button:hover {
+        buttons-container a[button]:hover {
             color: white !important;
         }
-    }
 
-    @media screen and (max-width: 835px) {
-        &:has(.sona) {
-            padding-bottom: 5rem;
-
-            .sona {
-                pointer-events: none !important;
-            }
+        img[sona] {
+            max-width: 13rem;
+            bottom: -2rem;
         }
     }
 
-    @media screen and (max-width: 375px) {
-        &:has(.sona) {
-            padding-bottom: 0rem !important;
-
-            .sona {
-                display: none !important;
-            }
+    &:hover {
+        img[sona] {
+            opacity: 1;
         }
     }
 }