feat: add widget and link to Coldridge steam page

content/en/games/coldridge.md

@@ -2,7 +2,8 @@
 title: ColdRidge
 picture: games/coldridge.png
 picture_alt: in-game screenshot of a cow-boy riding in wilderness
-website: https://coldridge.frog-collective.com
+website: https://store.steampowered.com/app/3052500/ColdRidge/
+steam_widget_url: https://store.steampowered.com/widget/3052500/
 ---
 
 Step into the rugged boots of a prospector and venture into the untamed wilderness of ColdRidge, a land shrouded in mystery and plagued by a sinister curse.

content/fr/games/coldridge.md

@@ -2,7 +2,8 @@
 title: ColdRidge
 picture: games/coldridge.png
 picture_alt: Capture d'écran d'un prospecteur chevauchant les contrées sauvages de ColdRidge.
-website: https://coldridge.frog-collective.com
+website: https://store.steampowered.com/app/3052500/ColdRidge/
+steam_widget_url: https://store.steampowered.com/widget/3052500/
 ---
 
 Enfilez les bottes d'un prospecteur et aventurez-vous dans les étendues sauvages de ColdRidge, une terre entourée de mystère et frappée par une sinistre malédiction.

src/pages/index/games.html

@@ -21,7 +21,13 @@
       </div>
       <div class="game--description">
         {{ game }}
-        <a class="game--more-button" href="{{ game.meta.website }}">Learn More</a>
+        <div class="game--steam-widget">
+          <iframe src="{{ game.meta.steam_widget_url }}" frameborder="0" width="646" height="190"></iframe>
+        </div>
+        <a class="game--steam-button" href="{{ game.meta.website }}" target="_blank">
+          <img class="game--link-icon" src="/img/steam-fill.svg" alt-text="{{name}}"></img>
+          Learn More
+        </a>
       </div>
     </div>
   {% endfor %}

src/pages/index/games.scss

@@ -31,8 +31,29 @@
         }
     }
 
-    &--more-button {
+    &--steam-button {
         @extend %button;
-        align-self: end;
+        display: none;
+        
+        @media($mobile-breakpoint) {
+            display: flex;
+            align-self: end;
+            align-items: center;
+        }
+
+        img {
+            width: 2em;
+            filter: invert(100%);
+            margin-right: var(--space-small);
+        }
+    }
+
+    &--steam-widget {
+        align-self: center;
+        padding: var(--space-small);
+
+        @media($mobile-breakpoint) {
+            display: none;
+        }
     }
 }