Refactor CSS styles and layout adjustments

Refactor CSS styles for header, links, and footer. Adjust layout properties in main and articles.

Author: anitahy73

Wireframe/style.css

@@ -31,26 +31,10 @@ body {
   color: var(--ink);
   font: var(--font);
 }
-header {
-  text-align: center;
-}
 a {
- 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);
+  padding: var(--space);
+  border: var(--line);
+  max-width: fit-content;
 }
 img,
 svg {
@@ -64,16 +48,11 @@ 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.
@@ -85,7 +64,6 @@ 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;
@@ -108,22 +86,4 @@ 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;