Add lighthouse image

_layouts/default.html

@@ -48,7 +48,7 @@
 				max-width: 100%;
 			}
 
-			#gallery {
+			.gallery {
 				display: flex;
 				flex-wrap: wrap;
 				flex-direction: row;
@@ -58,7 +58,7 @@
 				margin: 0 -10px;
 			}
 
-			#gallery a {
+			.gallery a {
 				flex: 1;
 				display: block;
 				padding: 0;
@@ -67,16 +67,16 @@
 				max-width: 470px;
 			}
 
-			#gallery a:hover {
+			.gallery a:hover {
 				text-decoration: none;
 			}
 
-			#gallery a img {
+			.gallery a img {
 				display: block;
 				border-radius: 8px;
 			}
 
-			#gallery a span {
+			.gallery a span {
 				display: block;
 				margin: 10px;
 				color: white;

gallery/index.html

@@ -2,6 +2,9 @@
 title: Gallery
 layout: default
 root: ../
+landmarks:
+- caption: Lighthouse
+  url: lighthouse.png
 images:
 - caption: Saren Mansion, my first build
   url: saren_mansion.png
@@ -17,9 +20,20 @@ images:
   url: tower.png
 ---
 
+<h2>Landmarks</h2>
+
+<div class="gallery">
+{% for img in page.landmarks %}
+	<a href="{{ img.url }}">
+		<img src="{{ img.url | replace:'.png','_thumb.jpg' }}" alt="{{ img.caption }}" />
+		<span>{{ img.caption }}</span>
+	</a>
+{% endfor %}
+</div>
+
 <h2>My Builds</h2>
 
-<div id="gallery">
+<div class="gallery">
 {% for img in page.images %}
 	<a href="{{ img.url }}">
 		<img src="{{ img.url | replace:'.png','_thumb.jpg' }}" alt="{{ img.caption }}" />