From 6873ad6a66c9cf31a3be7e5230255ef06c2d1d12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Mon, 13 Jun 2022 23:46:04 +0200
Subject: [PATCH] Make aspect-ratio fallback work properly on Location page
 House photo

---
 src/style/molecules/_house.scss | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/style/molecules/_house.scss b/src/style/molecules/_house.scss
index 1b20fa5..074eda5 100644
--- a/src/style/molecules/_house.scss
+++ b/src/style/molecules/_house.scss
@@ -91,8 +91,8 @@
                 border-radius: 8px;
             }
 
+            // Aspect-ratio fallback
             @supports not (aspect-ratio: auto) {
-                position: relative;
                 overflow: hidden;
                 padding-top: 66.66%;
                 height: 0;
@@ -101,25 +101,25 @@
         picture {
             height: 100%;
             border-radius: 0;
+
+            // Aspect-ratio fallback
+            @supports not (aspect-ratio: auto) {
+                position: absolute;
+                width: fit-content;
+                top: 0;
+                left: 50%;
+                height: 100%;
+                transform: translateX(-50%);
+            }
         }
         img {
             display: block;
-            width: calc(100% + 2px);
-            height: calc(100% + 2px);
-            object-fit: cover;
-            transform: scale3d(1.125, 1.125, 1.125);
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+            transform: scale3d(1.1, 1.1, 1.1);
             transition: transform 2s var(--ease-quart), opacity 1.2s var(--ease-quart);
             will-change: transform;
-
-            @supports not (aspect-ratio: auto) {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: auto;
-                max-width: 100%;
-                height: auto;
-                transform: translate(-50%, -50%);
-            }
         }
 
         // Variant: Not landscape
@@ -203,7 +203,7 @@
             opacity: 1;
 
             img {
-                transform: scale3d(1,1,1);
+                transform: scale3d(1.01, 1.01, 1.01);
             }
         }
     }