diff --git a/gatsby/package-lock.json b/gatsby/package-lock.json
index e8adca1..d4c185a 100644
--- a/gatsby/package-lock.json
+++ b/gatsby/package-lock.json
@@ -12,6 +12,7 @@
         "@mdx-js/react": "^1.6.22",
         "autoprefixer": "^10.2.6",
         "babel-plugin-styled-components": "^1.12.0",
+        "classnames": "^2.3.1",
         "fast-exif": "^1.0.1",
         "gatsby": "^3.4.1",
         "gatsby-plugin-image": "^1.6.0",
@@ -5828,6 +5829,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -29625,6 +29631,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
diff --git a/gatsby/package.json b/gatsby/package.json
index 0130361..19fcda3 100644
--- a/gatsby/package.json
+++ b/gatsby/package.json
@@ -19,6 +19,7 @@
     "@mdx-js/react": "^1.6.22",
     "autoprefixer": "^10.2.6",
     "babel-plugin-styled-components": "^1.12.0",
+    "classnames": "^2.3.1",
     "fast-exif": "^1.0.1",
     "gatsby": "^3.4.1",
     "gatsby-plugin-image": "^1.6.0",
diff --git a/gatsby/src/templates/gallery-image.js b/gatsby/src/templates/gallery-image.js
index d8cdfca..01fd04c 100644
--- a/gatsby/src/templates/gallery-image.js
+++ b/gatsby/src/templates/gallery-image.js
@@ -3,6 +3,7 @@ import { graphql } from 'gatsby'
 import { getMeta, getName } from "../utils";
 import { GatsbyImage, getImage } from "gatsby-plugin-image"
 import { Helmet } from "react-helmet";
+import classnames from 'classnames'
 
 const GalleryImage = ({ pageContext, data }) => {
   const image = data.allFile.edges[0].node
@@ -15,6 +16,8 @@ const GalleryImage = ({ pageContext, data }) => {
   //   imageStyle.height = '90vh'
   // }
 
+  console.log(`calc(90vw * ${ar})px`)
+
   const name = getName(image);
   return (<>
     <Helmet>
@@ -22,23 +25,28 @@ const GalleryImage = ({ pageContext, data }) => {
       <body className="bg-black" />
     </Helmet>
     <div className="min-h-screen flex flex-col justify-center">
-      {/* use inline-block to set width to same as children but it still doesn't work for vert images */}
-      {/* todo: totally different layout for vertical images? by inspecting aspect ratio? Ohhhh yes */}
-      <div style={{margin: '0 5vw'}} className="mx-auto">
-        <h1 className="text-2xl mt-2">{name}</h1>
-        <GatsbyImage
-          className=""
-          loading='eager'
-          objectFit='contain'
-          style={{
-            // width: '90vw',
-            height: '100%',
-            maxHeight: '90vh'
-          }}
-          key={image.base}
-          image={getImage(image)}
-          alt={name} />
-        <p>{getMeta(image).iptc.caption}</p>
+      {/* TODO: change layout by amount of empty space on side of page, not aspect ratio? */}
+      <div style={{ margin: '0 5vw' }} className={classnames("flex mx-auto", ar > 1 ? 'flex-col' : 'flex-row-reverse')}>
+        <div className='flex-grow-0'>
+          <h1 className="text-2xl mt-2">{name}</h1>
+          <GatsbyImage
+            className=""
+            loading='eager'
+            objectFit='contain'
+            style={{
+              maxWidth: `calc(max(90vh, 500px) * ${ar})`,
+              // height: '90vh',
+              maxHeight: '90vh',
+              minHeight: '500px'
+            }}
+            key={image.base}
+            image={getImage(image)}
+            alt={name} />
+        </div>
+        <div className={classnames('flex-shrink-0 mr-4', ar <= 1 && 'pt-4 flex-auto text-right')}>
+          <p>{getMeta(image).iptc.caption}</p>
+          <p>some other meta</p>
+        </div>
       </div>
     </div>
   </>);
