💄 style: fix home banner layout for short intro

welpo · Nov 27, 2024 · f36d2b7 · f36d2b7
1 parent 6d44320
commit f36d2b7
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/sass/parts/_home-banner.scss b/sass/parts/_home-banner.scss
@@ -1,7 +1,7 @@
 #banner-container-home {
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: space-between;
+    align-items: flex-start;
     margin: 0.2rem auto;
     width: 100%;
 
@@ -11,6 +11,7 @@
     }
 
     #home-banner-text {
+        flex: 1;
         margin-block-end: 1.5rem;
         color: var(--primary-color);
         font-size: 1.875rem;
@@ -53,19 +54,18 @@
 
     #image-container-home {
         position: relative;
+        margin: auto 0;
         padding-inline-start: 2rem;
-        min-width: 11rem;
-        min-height: 11rem;
+        max-width: 11rem;
         overflow: hidden;
         text-align: center;
 
         #banner-home-img {
             border: none;
             aspect-ratio: 1 / 1;
             width: 100%;
-            max-width: 15rem;
-            height: auto;
-            max-height: 15rem;
+            height: 100%;
+            object-fit: cover;
 
             @media only screen and (max-width: 600px) {
                 max-width: 12rem;
@@ -75,6 +75,8 @@
 
         @media only screen and (max-width: 600px) {
             padding-inline-start: 0;
+            width: 100%;
+            max-width: none;
         }
     }
 }