diff --git a/connect.css b/connect.css
index 4e96625..dec1aa1 100644
--- a/connect.css
+++ b/connect.css
@@ -70,6 +70,52 @@ font-weight: 200;
   margin: 10px 0 0 60px;
   max-width: 560px;
 }
+@media (max-width: 1200px) {
+  .banner > .container {
+    padding: 180px 0 0 0;
+    background-position: center right -120px;
+    height: 450px;
+  }
+}
+@media (max-width: 900px) {
+  .banner > .container {
+    padding: 120px 0 0 0;
+    background-position: center right -120px;
+    height: 350px;
+  }
+  .banner-connect {
+    font-size: 60px;
+    margin: 0 0 0 40px;
+  }
+  .banner-info {
+    font-size: 24px;
+    margin: 20px 0 0 40px;
+  }
+  .banner-desc {
+    font-size: 18px;
+    margin: 10px 0 0 40px;
+    max-width: 500px;
+  }
+}
+@media (max-width: 720px) {
+  .banner > .container {
+    padding: 60px 0 0 0;
+  }
+  span.banner-when, span.banner-where {
+    display: block;
+  }
+  span.banner-dash {
+    display: none;
+  }
+  .banner-desc {
+    max-width: 300px;
+  }
+}
+@media (max-width: 520px) {
+  .banner > .container {
+    background-position: center right 100%;
+  }
+}
 .container {
   margin: 0 auto;
   max-width: 1200px;
diff --git a/index.html b/index.html
index 7f923d0..9f66698 100644
--- a/index.html
+++ b/index.html
@@ -50,7 +50,7 @@
 <div class="banner">
   <div class="container">
     <div class="banner-connect">Connect</div>
-    <div class="banner-info">February 3, 2023 — Brussels, Belgium</div>
+    <div class="banner-info"><span class="banner-when">February 3, 2023</span><span class="banner-dash"> — </span><span class="banner-where">Brussels, Belgium</span></div>
     <div class="banner-desc">Connect with the CentOS community to learn
       about the latest developments in the Enterprise Linux ecosystem.</div>
   </div>