Like the index responsiveness

layouts/_default/index.html

@@ -2,8 +2,8 @@
 <main id="content">
 
 	<div class="feature">
-		<img class='header-image' src='images/index-header.jpeg'>
-		<!-- <h1><span class='title-small-tech'>Small Technology</span> <span class='title-foundation'>Foundation</span></h1> -->
+		<img class='header-image' src='images/index-header-tighter-crop.png'>
+		<h1 class='title-foundation'>Foundation</h1>
 	</div>
 
 	{{ .Content }}

themes/small-tech/static/style.css

@@ -322,7 +322,7 @@ main * {
 }
 
 .home .feature {
-	padding: 0.5em 0 0;
+	/* padding: 0.5em 0 0; */
 	position: relative; /* enable positioning on pseudo selectors */
 }
 
@@ -345,15 +345,35 @@ main * {
 	grid-column: 17 / 20;
 } */
 
+.home .feature {
+	background-color: #AFE1E8;
+	margin-top: 0;
+}
+
 .header-image {
 	grid-column: 1/20;
 	width: 100%;
+	margin-top: -2vw;
 }
 
+/* xxx */
 
 .feature .title-foundation {
 	display: block;
+	padding-bottom: 0;
+	margin-bottom: 0;
+	width: 100%;
 	text-align: center;
+	position: absolute;
+	grid-column: 1/20;
+	bottom: 20%;
+	font-size: 8vw;
+	text-transform: capitalize;
+	font-weight: 400;
+	padding: 0;
+	margin: 0;
+	z-index: -1;
+	color: #154652;
 }
 
 .subtitle {
@@ -361,7 +381,7 @@ main * {
 	grid-column: 2 / 19; /* centred */
 	display: grid;
 	grid-template-columns: var(--grid-columns-17-cols);
-	margin: 1em 0 1.5em 0;
+	margin: 1em 0.5em;
 	padding: 1.5em 0;
 	z-index: 2; /* pull in front of feature */
 }