diff --git a/website/site/assets/left.png b/website/site/assets/left.png
index d5bc860d..b9951fe6 100644
Binary files a/website/site/assets/left.png and b/website/site/assets/left.png differ
diff --git a/website/site/assets/right.png b/website/site/assets/right.png
index bd81cdfe..7388a457 100644
Binary files a/website/site/assets/right.png and b/website/site/assets/right.png differ
diff --git a/website/site/index.html b/website/site/index.html
index 55411cb8..54588a82 100644
--- a/website/site/index.html
+++ b/website/site/index.html
@@ -31,24 +31,24 @@
       }
 
       .gameDisplay {
-        height: calc(min(480px, 60vh));
+        height: calc(min(480px, 40vh, calc(100vw / 3)));
         margin-left: auto;
         margin-right: auto;
         max-width: 100vw;
         margin-top: 20px;
       }
 
-      .gameDisplay > div > div {
-        aspect-ratio: 17 / 33;
+      .gameDisplay .imageWrapper {
+        aspect-ratio: 15 / 31;
         height: 100%;
       }
 
-      .gameDisplay > div > div > img {
+      .gameDisplay .imageWrapper > img {
         height: 100%;
         image-rendering: pixelated;
       }
 
-      .gameDisplay > div > iframe {
+      .gameDisplay iframe {
         border: 0;
         height: 100%;
         max-width: 100vw;
@@ -99,12 +99,12 @@
     <section>
       <div class="gameDisplay">
         <div>
-          <div><img src="assets/left.png" /></div>
+          <div class="imageWrapper"><img src="assets/left.png" /></div>
           <iframe
             onload="this.contentWindow.focus()"
             src="mgba/index.html"
           ></iframe>
-          <div><img src="assets/right.png" /></div>
+          <div class="imageWrapper"><img src="assets/right.png" /></div>
         </div>
       </div>
       <div class="help">