Enhance styles for header and anchor elements

Added styles for header and updated anchor elements with new properties and hover effects.

Author: anitahy73

Wireframe/style.css

@@ -31,10 +31,26 @@ body {
   color: var(--ink);
   font: var(--font);
 }
+header {
+  text-align: center;
+}
 a {
-  padding: var(--space);
-  border: var(--line);
-  max-width: fit-content;
+ display: inline-block;
+  width: fit-content;
+  height: 40px;
+  line-height: 40px;
+  padding: 0 1.2em;
+  background: rgb(154, 206, 227);
+  color: black;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 600;
+  text-align: center;
+  vertical-align: bottom;
+}
+
+a:hover {
+  background: rgb(193, 214, 230);
 }
 img,
 svg {
@@ -48,11 +64,16 @@ https://www.w3.org/WAI/tutorials/page-structure/regions/
 main {
   max-width: var(--container);
   margin: 0 auto calc(var(--space) * 4) auto;
+  padding-bottom: calc(var(--space) * 6);
 }
 footer {
   position: fixed;
   bottom: 0;
+  width: 100%;
   text-align: center;
+  background: white;
+  border-top: var(--line);
+  padding: var(--space);
 }
 /* ====== Articles Grid Layout ====
 Setting the rules for how articles are placed in the main element.
@@ -64,6 +85,7 @@ https://gridbyexample.com/learn/
 main {
   display: grid;
   grid-template-columns: 1fr 1fr;
+ grid-template-rows: auto 1fr auto; /* Add this */
   gap: var(--space);
   > *:first-child {
     grid-column: span 2;
@@ -86,4 +108,22 @@ article {
   > img {
     grid-column: span 3;
   }
+ 
+  > a {
+    align-self: end; /* Add this */
+  }
+}
+
+article > h2 {
+  padding-top: var(--space);
 }
+
+article:first-child > img {
+  grid-column: span 3;
+  /* no aspect-ratio here, so it keeps its natural height */
+}
+
+article:not(:first-child) > img {
+  grid-column: span 3;
+  aspect-ratio: 16 / 9; /* force same height for bottom two */
+  object-fit: cover;