Make photo page responsive

extra/photo.css

@@ -18,9 +18,17 @@ body {
 .picture-frame {
   padding: 1em;
   background-color: #555;
+  /* for some reason this is required to make the img fit in the box */
+  overflow: hidden;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .picture-frame img {
+  display: block;
+  margin: 0 auto;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
@@ -36,3 +44,10 @@ h1 {
   font-size: 1.5em;
   margin-top: 0;
 }
+
+@media (max-aspect-ratio: 16/9) {
+  .my-epic-layout {
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr auto;
+  }
+}