diff --git a/assets/css/app.css b/assets/css/app.css
index caa8cf0..3843b41 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -118,7 +118,7 @@ section.content h2 {
 
 .hero {
   width: 100%;
-  padding: var(--space-xxl);
+  padding: var(--space-lg) var(--space-sm);
   background-image: url(/assets/img/banner-collage.jpg);
   background-position: center center;
   background-repeat: no-repeat;
@@ -130,6 +130,12 @@ section.content h2 {
   text-align: center;
 }
 
+@media screen and (width >= 480px) {
+  .hero {
+    padding: var(--space-xxl);
+  }
+}
+
 .hero_body {
   font-size: 1.5em;
   font-weight: bold;
@@ -155,7 +161,7 @@ section.content h2 {
 
 .slice {
   width: 100%;
-  padding: var(--space-lg);
+  padding: var(--space-sm);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -163,6 +169,12 @@ section.content h2 {
   text-align: center;
 }
 
+@media screen and (width >= 480px) {
+  .slice {
+    padding: var(--space-lg);
+  }
+}
+
 .slice--light-grey {
   background-color: var(--cotech-light-grey);
 }
@@ -217,8 +229,14 @@ section.content h2 {
 }
 
 .metadata {
-  display: flex;
-  gap: var(--space-xl);
+  display: none;
+}
+
+@media screen and (width >= 480px) {
+  .metadata {
+    display: flex;
+    gap: var(--space-xl);
+  }
 }
 
 .metadata_item {