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

Author: hackertainment

Wireframe/index.html

@@ -15,7 +15,7 @@ <h1>Wireframe</h1>
     </header>
     <main class="main">
       <section class="content">
-        <article>
+        <article class="article">
           <img src="placeholder.svg" alt="" />
           <h2>Title</h2>
           <p>
@@ -27,7 +27,7 @@ <h2>Title</h2>
       </section>
 
       <section class="content">
-        <article>
+        <article class="article">
           <img src="placeholder.svg" alt="" />
           <h2>Title</h2>
           <p>
@@ -37,7 +37,7 @@ <h2>Title</h2>
           <a href="">Read more</a>
         </article>
 
-        <article>
+        <article class="article">
           <img src="placeholder.svg" alt="" />
           <h2>Title</h2>
           <p>

Wireframe/style.css

@@ -14,10 +14,6 @@
 
 body {
   margin: 0;
-}
-
-body,
-button {
   font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
   color: var(--grey-dark);
   font-size: 1rem;
@@ -71,3 +67,49 @@ p {
   flex-direction: row;
   gap: 1rem;
 }
+
+
+/* Article */
+
+.article {
+  margin-bottom: 1rem;
+  border: medium solid var(--grey-light);
+  border-width: medium;
+  border-color: var(--grey-light);
+  padding: 1rem;
+  flex: 1;
+}
+
+.article h2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.article p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.article a {
+  background-color: var(--white);
+  color: var(--black);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--black);
+  border-radius: 4px;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+}
+
+.article a:hover {
+  background-color: var(--black);
+  color: var(--white);
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--white);
+  border-radius: 4px;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+}