From 77ca19868445ea24688baae38b52c9634362e272 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Mon, 22 Mar 2021 23:17:31 +0100
Subject: [PATCH] image tweaks

---
 src/components/atoms/Image.module.css | 1 +
 src/components/atoms/Image.tsx        | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/atoms/Image.module.css b/src/components/atoms/Image.module.css
index a8d4b987..8715291b 100644
--- a/src/components/atoms/Image.module.css
+++ b/src/components/atoms/Image.module.css
@@ -13,6 +13,7 @@ a:focus .frame {
 
 .image {
   composes: frame;
+  max-width: none;
   margin-top: calc(var(--spacer) * var(--line-height));
   margin-bottom: calc(var(--spacer) * var(--line-height));
   position: relative;
diff --git a/src/components/atoms/Image.tsx b/src/components/atoms/Image.tsx
index fe251544..4d540dba 100644
--- a/src/components/atoms/Image.tsx
+++ b/src/components/atoms/Image.tsx
@@ -34,7 +34,13 @@ export const imageSizeThumb = graphql`
     original {
       src
     }
-    gatsbyImageData(layout: CONSTRAINED, width: 480, height: 140, quality: 85)
+    gatsbyImageData(
+      layout: CONSTRAINED
+      width: 480
+      height: 180
+      quality: 85
+      transformOptions: { cropFocus: CENTER }
+    )
   }
 `