Major redesign and rewrite

src/components/cards/ceCard.astro

@@ -0,0 +1,118 @@
+---
+import { Image } from 'astro:assets'
+import mlb_ce from '../../assets/ce/mlb.webp'
+import type { GlobImage } from '../../types/generic'
+import { plsLoadImage } from '../../utils/tools'
+
+export interface Props {
+  name: string
+  imageFile: string
+  mlb: boolean
+}
+
+const { mlb, imageFile, name } = Astro.props
+const imagePath = `/src/assets/ce/${imageFile}`
+const images_ces = import.meta.glob<GlobImage>('/src/assets/ce/*.png')
+const loadedCEImage = plsLoadImage(images_ces, imagePath)
+
+const mlb_image = mlb ? 'mlbalign' : 'hidemlb'
+---
+
+<article>
+  <div>
+    <Image src={loadedCEImage} alt={name} class="ce-crop" />
+  </div>
+  <div class={mlb_image}>
+    <Image src={mlb_ce} alt="Max-limit broken" class="mlb" />
+  </div>
+</article>
+
+<style>
+  .hidemlb {
+    display: none;
+    height: 1em;
+  }
+
+  article {
+    border-radius: 1.25rem;
+    background-color: var(--c-darkergray);
+    padding: 20px;
+    padding-top: 5px;
+    width: 35%;
+    height: auto;
+    justify-content: center;
+    text-align: center;
+    transition: transform var(--speed) var(--ease);
+    margin: 0px;
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: auto 3em;
+    gap: 0px 0px;
+    grid-auto-flow: row;
+    grid-template-areas:
+      '.'
+      '.';
+  }
+
+  article:hover {
+    transform: scale(var(--hover-scale));
+  }
+
+  article div {
+    margin: 0.5em auto;
+  }
+
+  img {
+    border-radius: 1.5rem;
+    margin-top: 1rem;
+    display: flex;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .heading-center {
+    display: flex;
+    height: 4rem;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.25em;
+    color: white;
+    font-weight: bold;
+  }
+
+  .ce-crop {
+    width: 6em;
+    height: 6em;
+  }
+
+  .mlb {
+    width: 5.5rem;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .mlbalign {
+    display: flex;
+    justify-items: center;
+    align-items: center;
+  }
+
+  @media (min-width: 512px) {
+    .ce-crop {
+      width: 7.5em;
+      height: 7.5em;
+    }
+    article {
+      width: 10em;
+    }
+    .mlbalign {
+      width: 7.5em;
+    }
+
+    .mlb {
+      width: 7rem;
+    }
+  }
+</style>