feat: integrate news section

css/content.css

@@ -109,3 +109,40 @@
 .game--more-button:hover {
     color: white;
 }
+
+/* News */
+.news {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: var(--space-medium);
+}
+
+.news::after {
+    content: "";
+    background: center / cover no-repeat url("/img/game-footer.png");
+    height: 13px;
+}
+
+.news--title {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    background: var(--dark);
+    color: white;
+    padding: var(--space-small) var(--space-medium);
+}
+
+.news--content {
+    padding: var(--space-large);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--primary-color);
+    color: var(--dark);
+}
+
+@media (max-width: 768px) {
+    .news--title {
+        grid-template-columns: auto;
+        grid-template-rows: auto auto;
+    }
+}

index.html

@@ -153,11 +153,12 @@
                 </h2>
                 <div class="section--content">
                     <div class="news">
-                        <h3 class="news--title">News Title</h3>
+                        <div class="news--title">
+                            <h3>This is a long news title to test how it presents on little resolutions</h3>
                             <div class="news--date">
                                 02/05/2024
                             </div>
-
+                        </div>
                         <div class="news--content">
                             Here we specialize in creating bite-sized adventures that anyone
                             can pick up and play, but only the true gaming aficionados can
@@ -173,11 +174,12 @@
                     </div>
 
                     <div class="news">
-                        <h3 class="news--title">News Title</div>
+                        <div class="news--title">
+                            <h3>This is a long news title to test how it presents on little resolutions</h3>
                             <div class="news--date">
                                 02/05/2024
                             </div>
-
+                        </div>
                         <div class="news--content">
                             Here we specialize in creating bite-sized adventures that anyone
                             can pick up and play, but only the true gaming aficionados can