diff --git a/public_html/css/hpr.css b/public_html/css/hpr.css
index 166417e..a29edc6 100644
--- a/public_html/css/hpr.css
+++ b/public_html/css/hpr.css
@@ -43,6 +43,9 @@ https://creativecommons.org/publicdomain/
 	--font-family-hpr: Verdana, Arial, Helvetica, sans-serif; /* 1em/1.5 OpenDyslexic, */;
 	--font-size-default: clamp(1rem, 15px + 0.3vw, 1.07rem);
 
+	--shadow-main-header-color: hsl(190deg 48% 49% / 0.2);
+	--shadow-secondary-color: hsl(0, 0%, 30.2%);
+	--shadow-cards: var(--shadow-secondary-color);
   /* screen breakpoints */
 	--for-phone-only: 599px;
     --for-tablet-portrait-up: 600px;
@@ -250,8 +253,8 @@ article > p,
 	flex-direction: row;
 	flex-wrap: wrap;
 	gap: 1.0rem;
-	justify-content: space-between;
-	justify-items: space-between;
+	justify-content: space-around;
+	justify-items: space-around;
 
 }
 #podcast_lane > .lane,
@@ -260,23 +263,39 @@ article > p,
 	justify-content: flex-start;
 }
 .lane > article {
-	padding: 1.0rem;
 	/* Add shadows to create the "card" effect */
-	border-top: thin solid hsl(190deg 48% 49% / 0.2);
-	border-left: thin solid hsl(190deg 48% 49% / 0.2);
+	border-top: thin solid var(--shadow-cards);
+	border-left: thin solid var(--shadow-cards);
 	border-radius: 0.5rem;
 	box-shadow:
-      1px 2px 2px hsl(190deg 48% 49% / 0.2),
-      2px 4px 4px hsl(190deg 48% 49% / 0.2);
+      1px 2px 2px var(--shadow-cards),
+      2px 4px 4px var(--shadow-cards);
 	transition: 0.3s;
-	width: max-content;
-	flex: 1 0 50%;
-	overflow-y: scroll;
+	flex: 1 0 100%;
+	overflow-x: scroll;
+	padding-bottom: 1rem;
 }
 .lane > article:hover {
 	box-shadow: 
-      4px 8px 8px hsl(190deg 48% 49% / 0.2),
-      8px 16px 16px hsl(190deg 48% 49% / 0.2);
+      4px 8px 8px var(--shadow-cards),
+      8px 16px 16px var(--shadow-cards);
+}
+.lane > article > * {
+	margin-left: 1rem;
+	margin-right: 1rem;
+}
+.lane > article > header {
+	background: var(--background-secondary);
+	padding: 1.5rem 1rem 1rem 1rem;
+	margin: 0;
+	font-weight: bold;
+	font-size: 1.45rem;
+}
+.lane > article > header a {
+	color: var(--link-secondary);
+}
+.lane > article > header a:hover {
+	color: var(--link-secondary-hover);
 }
 a.lane-button {
 	display: flex;
@@ -402,6 +421,7 @@ fieldset > input {
 	body > header {
 		background-size: 200pt, cover;
 		background-position: left 128pt top -12pt, left top;
+		justify-content: space-between;
 	}
 	#tag_line {
 		text-align: center;
@@ -474,10 +494,19 @@ fieldset > input {
 		padding: 0.25rem 2rem;
 	}
 	.lane > article {
-		flex-basis: 30%;
-	/*	max-width: 30%; */ 
+		max-height: 40vw;
+		overflow-y: scroll
+	}
+	.lane > article:nth-last-child(2),
+	.lane > article:last-child {
 	}
 	#latest_lane.lane section > ul {
 		margin: 0.5rem 3rem 0 1rem;	
 	}
 }
+@media (min-width: 900px) {
+	.lane > article {
+		flex-basis: 32%;
+		max-width: 32%;
+	}
+