In CSS replaced grid with flexbox in article cards to fix alignment and equal height

Author: Lavanya-Projects

Wireframe/style.css

@@ -1,4 +1,3 @@
-
 :root {
   --paper: oklch(7 0 0);
   --ink: color-mix(in oklab, var(--color) 5%, black);
@@ -8,23 +7,27 @@
   --container: 1280px;
 }
 
- h1{
+h1 {
   text-align: center;
- }
- .description{
+}
+
+.description {
   text-align: center;
 
- }
+}
+
 body {
   background: var(--paper);
   color: var(--ink);
   font: var(--font);
 }
+
 a {
   padding: var(--space);
   border: var(--line);
   max-width: fit-content;
 }
+
 img,
 svg {
   width: 100%;
@@ -35,33 +38,31 @@ main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
 }
+
 footer {
-  position:relative;
+  position: relative;
   bottom: 0;
   width: 100%;
-  color:black;
+  color: black;
   text-align: center;
 }
 
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space);
-  > *:first-child {
+
+  >*:first-child {
     grid-column: span 2;
   }
 }
 
 article {
   border: var(--line);
-  padding-bottom: var(--space);
+  padding: var(--space);
   text-align: left;
-  display: grid;
-  grid-template-columns: var(--space) 1fr var(--space);
-  > * {
-    grid-column: 2/3;
-  }
-  > img {
-    grid-column: span 3;
-  }
-}
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}