Moved images to assets, rewrote to use Image component, fixed styling issues

src/components/ceCard.astro

@@ -1,16 +1,19 @@
 ---
+import type { ImageMetadata } from 'astro';
+import { Image } from 'astro:assets';
+import mlb_ce from '../assets/ce/mlb.webp'
+
 export interface Props {
   name: string
-  link: string
+  imageFile: string
   mlb: string
 }
 
-const { mlb, link, name } = Astro.props
+const { mlb, imageFile, name } = Astro.props
+const imagePath = `/src/assets/ce/${imageFile}`
+const images_ces = import.meta.glob<{ default: ImageMetadata }>('/src/assets/ce/*.webp')
 
-const ce_img: string = `/assets/ce/${link}.webp`
-const mlb_ce: string = `/assets/ce/mlb.webp`
 let mlb_image: string = 'mlbalign'
-
 if (mlb === 'false') {
   mlb_image = 'hidemlb'
 }
@@ -18,10 +21,10 @@ if (mlb === 'false') {
 
 <article>
   <div>
-    <img class="ce-crop" src={ce_img} alt={name} />
+    <Image src={images_ces[imagePath]()} alt={name} class="ce-crop"/>
   </div>
   <div class={mlb_image}>
-    <img class="mlb" src={mlb_ce} alt="Max-limit broken" />
+    <Image src={mlb_ce} alt="Max-limit broken" class="mlb"/>
   </div>
 </article>