diff --git a/layouts/photos/single.html b/layouts/photos/single.html
index 8e3eaea..6ff4ce6 100644
--- a/layouts/photos/single.html
+++ b/layouts/photos/single.html
@@ -9,12 +9,19 @@
 {{ $path := .Page.File.Path | strings.TrimSuffix (path.Ext .Page.File.Path) }}
 {{ $images := where (resources.Match "photos/test1/*" ) "ResourceType" "eq" "image" }}
 
-<div class="gallery" >
-	{{ range $images }} <div class="gallery-item"> <img src="{{ .RelPermalink }}" /> </div> {{ end }}
-</div>
+	
+
+	<div class="gallery">
+	{{ range $images }} 
+		<div class="gallery-item">
+			<img src="{{ .RelPermalink }}" />
+    </div>
+	{{ end }}
+  </div>
+
+
+
 </div>
 
-<style>
-</style>
 
 {{ partial "footer.html" . }}
diff --git a/static/css/style.css b/static/css/style.css
index 2044c13..5b5a9f8 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -598,3 +598,43 @@ blockquote.location p { padding: inherit; }
     font-size: 2vh;
     }
 }
+
+
+
+/* pics stuff */
+
+.gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+	width: 100%;
+}
+
+.gallery-item {
+	flex-grow: 1;
+	flex: 1 1 auto;
+	height: 25vh;
+}
+
+@media screen and (max-width: 755px) {
+
+	.gallery-item {
+		width: 100%;
+		height: auto;
+	}
+
+}
+
+@media screen and (min-width: 1040px) {
+	.gallery-item {
+		height: 18vh;
+	}
+}
+
+.gallery-item img {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
+}
+
+