Reserve slider layout space to eliminate CLS

index.html

@@ -22,9 +22,12 @@
       margin: 2rem auto;
       background: #ffffff;
       padding: 2rem;
+      min-height: 630px;
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
     }
     .slide { display: none; }
     .slide.active { display: block; animation: fadeIn 0.5s ease-in-out; }
@@ -36,11 +39,13 @@
       display: flex;
       align-items: center;
       gap: 4rem;
+      width: 100%;
     }
-    .slide-image { flex: 1 1 50%; }
+    .slide-image { flex: 1 1 50%; aspect-ratio: 1 / 1; display: flex; }
     .slide-image img {
       width: 100%;
-      height: auto;
+      height: 100%;
+      object-fit: cover;
       display: block;
       border-radius: 0.5rem;
     }
@@ -74,11 +79,12 @@
         gap: 1.5rem;
       }
       .slide-portrait {
-        float: none;
-        margin: 0 auto 2rem auto;
-        width: 200px;
-        height: 200px;
-      }
+      float: none;
+      margin: 0 auto 2rem auto;
+      width: 200px;
+      height: 200px;
+    }
+    .slide-content { gap: 2rem; }
     }
   </style>
 <link as="style" href="/assets/css/style-home.min.css" onload="this.onload=null;this.rel='stylesheet'" rel="preload"/>