Create photo grid items

src/Grid.css

@@ -102,6 +102,50 @@
 	font-family: monospace;
 }
 
+.photo a {
+	display: block;
+	position: relative;
+	height: 100%;
+}
+
+.photo header, .photo footer {
+	display: none;
+	position: absolute;
+	width: 100%;
+	z-index: 2;
+
+	background: rgba(0, 0, 0, 0.4);
+	color: white;
+}
+
+.photo header {
+	top: 0;
+	font-size: 1.5rem;
+	padding: 0.5rem;
+}
+
+.photo footer {
+	bottom: 0;
+	justify-content: space-between;
+	padding: 0 1em;
+	font-size: 1rem;
+	font-family: monospace;
+}
+
+.photo a:hover header {
+	display: block;
+}
+
+.photo a:hover footer {
+	display: flex;
+}
+
+.photo img {
+	position: absolute;
+	height: 100%;
+	left: 0;
+}
+
 @media all and (max-width: 120rem) {
 	.grid-item {
 		width: 25%;
@@ -133,5 +177,15 @@
 	.grid-item {
 		width: 100%;
 		padding-bottom: 100%;
+		margin-bottom: 1rem;
+	}
+	.grid-item-content.photo {
+		padding: 0;
+	}
+	.photo a header {
+		display: block;
+	}
+	.photo a footer {
+		display: flex;
 	}
 }