Intial card layout design

Format episodes, series, syndication pages with card format.

public_html/css/hpr.css

@@ -249,9 +249,35 @@ article > p,
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
-	gap: 0.5rem;
+	gap: 1.0rem;
+	justify-content: space-between;
+	justify-items: space-between;
 
 }
+#podcast_lane > .lane,
+#project_lane > .lane,
+#latest_lane.lane {
+	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-radius: 0.5rem;
+	box-shadow:
+      1px 2px 2px hsl(190deg 48% 49% / 0.2),
+      2px 4px 4px hsl(190deg 48% 49% / 0.2);
+	transition: 0.3s;
+	width: max-content;
+	flex: 1 0 50%;
+	overflow-y: scroll;
+}
+.lane > article:hover {
+	box-shadow: 
+      4px 8px 8px hsl(190deg 48% 49% / 0.2),
+      8px 16px 16px hsl(190deg 48% 49% / 0.2);
+}
 a.lane-button {
 	display: flex;
 	flex-direction: column;
@@ -369,7 +395,10 @@ fieldset > input {
 	border: thin solid var(--input-border-primary);
 	border-radius: 0.2rem;
 }
-@media (min-width: 900px) {
+.no-css {
+	display: none;
+}
+@media (min-width: 600px) {
 	body > header {
 		background-size: 200pt, cover;
 		background-position: left 128pt top -12pt, left top;
@@ -395,9 +424,7 @@ fieldset > input {
 	}
 	#qr_code {
 		text-align: center;
-	}
-	#qr_code > img {
-		max-height: 195px;
+		max-width: 195px;
 	}
 	fieldset>table,
 	fieldset>table thead,
@@ -446,4 +473,11 @@ fieldset > input {
 	body > main {
 		padding: 0.25rem 2rem;
 	}
+	.lane > article {
+		flex-basis: 30%;
+	/*	max-width: 30%; */ 
+	}
+	#latest_lane.lane section > ul {
+		margin: 0.5rem 3rem 0 1rem;	
+	}
 }