make banner clickable

src/_includes/components/banner.njk

@@ -1,9 +1,14 @@
 {% if site.banner %}
   <section id="banner" style="display: none">
-    <div class="banner__content">
-      <p>
-        <a href="/embassy-pro">Embassy Pro</a> presale ends Nov 20, 11:00pm ET. Price will rise from $1,499 to $1,899. <a target="_blank" rel="noopener noreferrer" href="{{ site.products.pro }}">Get yours</a>!
-      </p>
+    <div class="link-container">
+      <a class="overlay" target="_blank" rel="noopener noreferrer" href="{{ site.products.pro }}">
+        <div class="banner__content">
+          <p class="inner">
+            <a href="/embassy-pro">Embassy Pro</a> presale ends Nov 20, 11:00pm ET. Price will rise from $1,499 to $1,899.
+          </p>
+        </div>
+        <span class="link-spanner"></span>
+      </a>
     </div>
   </section>
 {% endif %}

src/assets/styles/main.scss

@@ -286,6 +286,33 @@ section#banner {
   top: 0;
   height: $banner-height;
 
+  a {
+    cursor: pointer;
+  }
+
+  .link-container {
+    position: relative;
+  }
+
+ .link-container .overlay {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+
+  .link-container .inner {
+    position: relative;
+    pointer-events: none;
+    z-index: 1;
+  }
+
+  .link-container .inner a {
+    pointer-events: all;
+    position: relative;
+  }
+
   .banner__content {
     display: flex;
     align-items: center;