Use CSS to lay out and style elements so they match a wireframe design

Author: hackertainment

Wireframe/style.css

@@ -8,8 +8,6 @@
  :root {
    --grey-dark: #292b2c;
    --grey-light: #e4e4e4;
-   --black: #000;
-   --white: #fff;
  }
 
 body {
@@ -30,9 +28,12 @@ p {
 }
 
 .header,
-.content,
+.main,
 .footer {
-  padding: 0 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
   max-width: 1200px;
   margin: 0 auto;
 }
@@ -41,22 +42,7 @@ p {
 /* Header */
 
 .header {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  height: 5rem;
-  margin-bottom: 1rem;
-  padding-top: 1rem;
-  gap: 1rem;
-}
-
-
-/* Main */
-
-.main {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
 }
 
 
@@ -72,8 +58,7 @@ p {
 /* Article */
 
 .article {
-  margin-bottom: 1rem;
-  border: medium solid var(--grey-light);
+  border-style: solid;
   border-width: medium;
   border-color: var(--grey-light);
   padding: 1rem;
@@ -83,47 +68,35 @@ p {
 .article h2 {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
-  font-size: 1rem;
-  font-weight: 700;
 }
 
 .article p {
-  margin-top: 0;
-  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .article a {
-  background-color: var(--white);
+  background-color: var(--grey-light);
   color: var(--black);
   border-style: solid;
   border-width: 1px;
-  border-color: var(--black);
+  border-color: var(--grey-dark);
   border-radius: 4px;
   text-decoration: none;
   padding: 0.5rem 1rem;
 }
 
 .article a:hover {
-  background-color: var(--black);
+  background-color: var(--grey-dark);
   color: var(--white);
-  border-style: solid;
-  border-width: 1px;
-  border-color: var(--white);
-  border-radius: 4px;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
+  border-color: var(--grey-light);
 }
 
 
 /* Footer */
 
 .footer {
-  margin-top: 2rem;
-  border-style: solid;
-  border-width: 2px;
-  border-color: var(--grey-light);
-  padding-top: 2rem;
-  padding-bottom: 1rem;
+  border-top: 2px solid var(--grey-dark);
   text-align: center;
   font-size: 0.85rem;
 }