Mobile layout for TA cards

src/components/taCard.astro

@@ -29,15 +29,21 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
 <a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
   <article>
     <Image src={servant_images[servantImagePath]()} alt="" class="icon" />
-    <div class="title">
+    <div class="title desktop">
       <h2>{title}</h2>
     </div>
-    <p>
+    <p class="desktop">
       <span>
         By {runner}<br /> •
       </span>
       {formatted_date}
     </p>
+    <div class="mobile">
+      <h2>{title}</h2>
+      <span>
+        •<br />By {runner}<br />{formatted_date}
+      </span>
+    </div>
     <div class="expand-on-hover">
       <h2>{turns}</h2>
     </div>
@@ -59,24 +65,108 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
 
   a {
     text-decoration: none;
+    width: 90%;
+  }
+
+  .mobile {
+    width: 12rem;
+    height: 8rem;
+    padding: unset;
+    margin: unset;
+    display: flex;
+    flex-flow: column;
+    color: white;
+    align-items: center;
+    padding-left: 0.5rem;
+  }
+
+  .mobile > h2 {
+    margin: 0%;
+    margin-top: 0.5rem;
+    font-size: 1.25rem;
+    text-align: center;
+  }
+
+  .mobile span {
+    font-size: 1.05rem;
   }
 
   article {
     background-color: var(--c-darkergray);
     border-color: var(--c-darkgray);
-    padding: 10px;
+    padding: 1rem 1.5rem;
     text-align: center;
     transition: transform var(--speed) var(--ease);
     height: auto;
-    width: auto;
-    max-width: 8rem;
+    width: 90%;
     border-radius: 1.25rem;
-    padding-bottom: 1.5rem;
     --size-value: 7rem;
     display: flex;
-    justify-content: center;
     align-items: center;
-    flex-direction: column;
+    justify-content: space-around;
+  }
+
+  @media (max-width: 1139px) {
+    .desktop {
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
+      overflow: hidden;
+      padding: 0;
+      position: absolute;
+      width: 1px;
+    }
+  }
+
+  @media (min-width: 620px) {
+    article {
+      width: 15rem;
+      justify-content: center;
+      padding: 10px;
+    }
+
+    a {
+      width: unset;
+    }
+
+    .mobile > h2 {
+      font-size: 1rem;
+    }
+  }
+
+  @media (min-width: 1140px) {
+    .mobile {
+      display: none;
+    }
+
+    article {
+      max-width: 8rem;
+      flex-direction: column;
+      padding-bottom: 1.5rem;
+    }
+
+    .expand-on-hover {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: space-evenly;
+      background-color: var(--c-duskgray);
+      z-index: 99;
+      transform: scaleY(0);
+      transform-origin: top;
+      position: absolute;
+      top: 90%;
+      left: 0px;
+      right: 0px;
+      color: white;
+      border-radius: 0px 0px 1.25rem 1.25rem;
+    }
+
+    article > .icon {
+      margin: 0.5rem;
+    }
   }
 
   article:hover {
@@ -87,7 +177,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     border-radius: 1.25rem;
     width: var(--size-value);
     height: var(--size-value);
-    margin: 0.5rem;
   }
 
   article:hover .title {
@@ -144,24 +233,6 @@ const servant_images = import.meta.glob<{ default: ImageMetadata }>(
     flex-direction: column;
   }
 
-  .expand-on-hover {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: space-evenly;
-    background-color: var(--c-duskgray);
-    z-index: 99;
-    transform: scaleY(0);
-    transform-origin: top;
-    position: absolute;
-    top: 90%;
-    left: 0px;
-    right: 0px;
-    color: white;
-    border-radius: 0px 0px 1.25rem 1.25rem;
-  }
-
   .expand-on-hover img {
     width: 3rem;
     height: 3rem;