Adjust feature component styling at larger breakpoints

cdlib · May 28, 2024 · 10f6a7f · 10f6a7f
1 parent 7c8752b
commit 10f6a7f
Showing 1 changed file with 19 additions and 10 deletions.
diff --git a/css/components/feature.css b/css/components/feature.css
@@ -5,7 +5,7 @@
   grid-template-columns: 1fr auto;
   grid-template-rows: auto auto 1fr auto;
   gap: var(--space-base);
-  padding: var(--space-base);
+  padding: 1.5rem 2rem 1rem;
   border-top: 3px solid var(--color-gold);
   border-radius: var(--border-block-end-radius);
   background-color: white;
@@ -30,12 +30,12 @@
 .c-feature__media {
   grid-column: 1 / 3;
   grid-row: 2;
-  border: 2px solid black;
+  border: 2px solid oklch(88% 0.015 85deg);
 
   & img {
+    display: block;
     block-size: 100%;
     inline-size: 100%;
-    object-fit: cover;
   }
 }
 
@@ -45,7 +45,6 @@
   grid-column: 1 / 3;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: space-around;
   gap: var(--space-base);
 
   & li {
@@ -73,7 +72,7 @@
 
 @media (width >= 50rem) {
   .c-feature {
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr 1.5fr;
 
     & h1 {
       grid-column: 2;
@@ -92,6 +91,11 @@
   .c-feature__media {
     grid-column: 1;
     grid-row: 1 / 5;
+
+    & img {
+      max-block-size: 25rem;
+      object-fit: contain;
+    }
   }
 
   .c-feature__links {
@@ -101,16 +105,21 @@
 
 @media (width >= 80rem) {
   .c-feature {
-    width: 99%;
+    grid-template-columns: 1fr 1fr;
+    width: calc(100% - var(--space-sm));
     height: 100%;
     container-type: size;
   }
+
+  .c-feature__media {
+    & img {
+      max-block-size: 100%;
+    }
+  }
 }
 
-@container (aspect-ratio <= 1.5/1) {
+@container (aspect-ratio <= 1.5 / 1) {
   .c-feature {
-    grid-template-columns: 1fr auto;
-
     & h1 {
       grid-column: 1;
     }
@@ -128,7 +137,7 @@
   .c-feature__media {
     grid-column: 1 / 3;
     grid-row: 2;
-    max-block-size: 27rem;
+    min-block-size: 100%;
   }
 
   .c-feature__links {