feat: integrate games section

css/content.css

@@ -68,3 +68,44 @@
         flex-direction: column;
     }
 }
+
+/* Games */
+
+.game {
+    display: flex;
+    flex-direction: column;
+}
+
+.game::after {
+    content: "";
+    background: center / cover no-repeat url("/img/game-footer.png");
+    height: 13px;
+}
+
+.game--picture-wrapper {
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+}
+
+.game--description {
+    padding: var(--space-large);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--primary-color);
+    color: var(--dark);
+}
+
+.game--more-button {
+    background: var(--dark);
+    color: var(--primary-color);
+    padding: var(--space-small) var(--space-medium);
+    text-decoration: none;
+    font-family: Knewave;
+    font-size: var(--fz-4);
+}
+
+.game--more-button:hover {
+    color: white;
+}

index.html

@@ -110,6 +110,38 @@
                 </div>
             </div>
 
+            <div class="section"
+                style="
+                    --image:url('/img/section-games.png');
+                    --hover-image:url('/img/section-games.png');
+                "
+            >
+                <h2 class="section--title">Games</h2>
+                <div class="game">
+                    <div class="game--picture-wrapper">
+                        <img
+                            class="game--picture"
+                            src="img/the-guild.png"
+                            alt="in-game screenshot of a cow-boy riding in wilderness"
+                        >
+                        </img>
+                    </div>
+                    <div class="game--description">
+                        <h3 class="game--title">The Guild</h3>
+                        <p>
+                            Saddle up, partner! Welcome to "Frontier Fortune:
+                            Prospector's Quest" where the dusty trails of the Old
+                            West lead to riches beyond your wildest dreams. In this
+                            thrilling adventure, you step into the boots of a
+                            rugged prospector, venturing into uncharted territories
+                            to uncover precious resources for a greedy guild hungry
+                            for wealth and power.
+                        </p>
+                        <a class="game--more-button" href="the-guild.frog-collective.org">Learn More</a>
+                    </div>
+                </div>
+            </div>
+
             <div class="section"
                 style="
                     --image:url('/img/section-news.png');