Mobile layout for gallery view pages

assets/css/main.css

@@ -603,29 +603,40 @@ main.gallery-layout {
 	align-items: start;
 	margin: 1rem 1rem 0 1rem;
 }
+@media only screen and (max-width: 960px) {
+	main.gallery-layout {
+		grid-template-columns: 1fr;
+	}
+}
 
 main.gallery-layout article {
 	grid-column-start: -2;
 	grid-row: 1;
 	margin-top: 5rem;
 }
-
-main.gallery-layout article h1 {
-	border: none;
-	background-color: transparent;
-	box-shadow: none;
-	float: none;
-	padding: 0;
-	margin: -7.5rem 0 2.75rem calc(-1 * var(--deus-post-padding));
-	font-size: 3em;
-}
-main.gallery-layout article h1::after {
-	content: none;
-}
 @media only screen and (max-width: 960px) {
+	main.gallery-layout article {
+		margin-top: 1rem;
+	}
+}
+
+@media only screen and (min-width: 961px) {
 	main.gallery-layout article h1 {
-		margin-left: 0;
-		margin-right: 0;
+		border: none;
+		background-color: transparent;
+		box-shadow: none;
+		float: none;
+		font-size: 2.5em;
+		line-height: 1.1;
+		font-size: 3em;
+		position: absolute;
+		padding: 0;
+		left: 0;
+		margin: 0;
+		bottom: calc(100% + 1.5rem);
+	}
+	main.gallery-layout article h1::after {
+		content: none;
 	}
 }
 
@@ -636,12 +647,9 @@ main.gallery-layout article h1::after {
 }
 
 .gallery {
-	--deus-gallery-column-count: 12;
-	--deus-gallery-grid-gap: 0.5em;
-	
 	display: grid;
-	grid-template-columns: repeat(var(--deus-gallery-column-count), auto);
-	grid-gap: var(--deus-gallery-grid-gap);
+	grid-template-columns: repeat(12, auto);
+	grid-gap: 0.5em;
 	align-content: start;
 }
 
@@ -654,3 +662,16 @@ main.gallery-layout article h1::after {
 .gallery .small {
 	grid-column: span 4;
 }
+
+@media only screen and (max-width: 960px) {
+	.gallery {
+		grid-template-columns: repeat(6, auto);
+		grid-gap: 0.75em;
+	}
+	.gallery .large {
+		grid-column: span 6;
+	}
+	.gallery .small {
+		grid-column: span 3;
+	}
+}