Optimized images

src/components/ceCard.astro

@@ -34,7 +34,6 @@ if (mlb === 'false') {
 
   article {
     background-color: var(--c-darkergray);
-    border-color: var(--c-darkgray);
     padding: 20px;
     padding-top: 5px;
     width: 35%;
@@ -82,12 +81,11 @@ if (mlb === 'false') {
   .ce-crop {
     width: 6em;
     height: 6em;
-    object-fit: cover;
-    object-position: 0% 0%;
   }
 
   .mlb {
-    width: 100%;
+    width: 120px;
+    height: 30px;
     margin-left: auto;
     margin-right: auto;
   }

src/components/servantCard.astro

@@ -78,7 +78,7 @@ if (bond10 === 'false') {
 
   article > img {
     width: 120px;
-    height: auto;
+    height: 120px;
   }
 
   @media (min-width: 512px) {
@@ -90,7 +90,11 @@ if (bond10 === 'false') {
 
     article > img {
       width: 200px;
-      height: auto;
+      height: 200px;
+    }
+
+    .bond-ce {
+      width: 128px;
     }
   }
 
@@ -122,7 +126,6 @@ if (bond10 === 'false') {
   .bond-ce {
     padding-top: 0.75rem;
     height: 3rem;
-    width: auto;
   }
 
   .unobtained {

src/pages/servants.astro

@@ -20,9 +20,16 @@ const description =
   <BaseSection title="Servants">
     {servantdata.map((item) => <ServantCard {...item} />)}
   </BaseSection>
+  <div class="placeholder"></div>
   <BaseSection title="CEs">
     {cedata.map((item) => <CeCard {...item} />)}
   </BaseSection>
 </Layout>
 
-<style></style>
+<style>
+  .placeholder {
+    visibility: hidden;
+    width: 100%;
+    height: 2.5rem;
+  }
+</style>