Mobile Improvements

src/components/taCard.astro

@@ -65,7 +65,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
 
   a {
     text-decoration: none;
-    width: 90%;
   }
 
   .mobile {
@@ -77,7 +76,7 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     flex-flow: column;
     color: white;
     align-items: center;
-    padding-left: 0.5rem;
+    padding-left: 0.75rem;
   }
 
   .mobile > h2 {
@@ -99,7 +98,7 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     text-align: center;
     transition: transform var(--speed) var(--ease);
     height: auto;
-    width: 90%;
+    max-width: 100%;
     border-radius: 1.25rem;
     --size-value: 7rem;
     display: flex;
@@ -120,11 +119,11 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     }
   }
 
-  @media (min-width: 620px) {
+  @media (min-width: 625px) {
     article {
       width: 15rem;
       justify-content: center;
-      padding: 10px;
+      padding: 1rem;
     }
 
     a {
@@ -195,7 +194,7 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     width: calc(var(--size-value) + 0.1rem);
     opacity: 90%;
     border-radius: 1.25rem;
-    top: 1.1em;
+    top: 1.45em;
   }
 
   article:hover .title h2 {

src/layouts/baseSection.astro

@@ -29,7 +29,7 @@ const { title, description } = Astro.props
     align-self: center;
     display: flex;
     flex-flow: row wrap;
-    padding: 1em;
+    padding-top: 1em;
     position: relative;
   }
   div h1 {