Fix CSS issue on jams page

public/style.css

@@ -7553,6 +7553,9 @@ article code {
 .g5 {
   gap: 4rem; }
 
+.aspect-ratio--2x1 {
+  padding-bottom: 50%; }
+
 .hide-if-empty:empty {
   display: none !important; }
 

src/rawdata/scss/_core.scss

@@ -372,6 +372,10 @@ article code {
 .g4 { gap: $spacing-large; }
 .g5 { gap: $spacing-extra-large; }
 
+.aspect-ratio--2x1 {
+  padding-bottom: 50%;
+}
+
 .hide-if-empty:empty {
   display: none !important;
 }

src/templates/src/jams_index.html

@@ -31,8 +31,8 @@
                 <img src="{{ static "wheeljam2021/TwitterCard.png" }}">
             </div>
         </a>
-        <a href="{{ .LispJamUrl }}" class="relative">
-            <div class="br2 overflow-hidden absolute absolute--fill flex flex-column flex justify-center items-center f3 c--dim">
+        <a href="{{ .LispJamUrl }}" class="br2 overflow-hidden relative aspect-ratio--2x1 bg--card">
+            <div class="aspect-ratio--object flex flex-column flex justify-center items-center f3 c--dim">
                 <h3>LISP Jam</h3>
             </div>
         </a>