100% width

app/src/components/HeroArticle.astro

@@ -305,9 +305,12 @@ const pdfFilename = `${slugify(pdfBase)}.pdf`;
     font-size: clamp(24px, 3.2vw, 38px);
   }
   .hero-banner {
-    max-width: 980px;
-    margin: 0 auto;
-    aspect-ratio: 5 / 2;
+    width: 100vw;
+    margin-left: calc(50% - 50vw);
+    margin-right: calc(50% - 50vw);
+    aspect-ratio: 4 / 1;
+    min-height: 280px;
+    max-height: 520px;
     overflow: hidden;
   }
   .hero-banner :global(.html-embed) {

app/src/content/embeds/banner.html

@@ -1,4 +1,4 @@
-<div class="tito-banner" style="width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); aspect-ratio: 4 / 1; min-height: 280px; max-height: 520px; overflow: hidden; position: relative; background: #04040e;">
+<div class="tito-banner" style="width: 100%; height: 100%; overflow: hidden; position: relative; background: #04040e;">
   <canvas class="tito-banner__canvas" style="display:block; width:100%; height:100%; cursor: crosshair; touch-action: none;"></canvas>
   <div class="tito-banner__hint" style="position:absolute; bottom:14px; right:18px; font: 600 10px -apple-system, BlinkMacSystemFont, sans-serif; color: rgba(254,245,216,0.55); letter-spacing: 0.14em; text-transform: uppercase; pointer-events: none; transition: opacity 1.2s ease; mix-blend-mode: screen;">hover to disturb</div>
 </div>