Rework Location page photos ratio and hover

Defines if the photo is under 3/2 by calculating ratio from width and height

src/style/molecules/_house.scss

@@ -77,14 +77,30 @@
         opacity: 0;
         transition: opacity 2s var(--ease-quart);
 
-        picture {
+        figure {
             position: relative;
-            z-index: 3;
+            z-index: 5;
+            display: flex;
+            justify-content: center;
+            height: 100%;
+            aspect-ratio: 3 / 2;
+            overflow: hidden;
             border-radius: 0;
 
             @include bp (sm) {
                 border-radius: 8px;
             }
+
+            @supports not (aspect-ratio: auto) {
+                position: relative;
+                overflow: hidden;
+                padding-top: 66.66%;
+                height: 0;
+            }
+        }
+        picture {
+            height: 100%;
+            border-radius: 0;
         }
         img {
             display: block;
@@ -94,45 +110,30 @@
             transform: scale3d(1.125, 1.125, 1.125);
             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
         &.not-landscape {
-            aspect-ratio: 3 / 2;
-
-            @supports not (aspect-ratio: auto) {
-                position: relative;
-                overflow: hidden;
-                padding-top: 66.66%;
-                height: 0;
-            }
-
-            picture {
-                height: 100%;
+            figure {
                 background: $color-cream;
             }
-            img {
-                height: 100%;
-                width: 100%;
-                object-fit: contain;
-
-                @supports not (aspect-ratio: auto) {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    width: auto;
-                    max-width: 100%;
-                    height: auto;
-                    transform: translate(-50%, -50%);
-                }
-            }
         }
 
         // Scale down image on hover
         @media (hover: hover) {
             a:hover {
                 img {
-                    opacity: 0.8;
+                    opacity: 0.7;
                     transform: scale3d(1.03, 1.03, 1.03) !important;
                     transition-duration: 1.2s;
                 }
@@ -140,26 +141,6 @@
         }
     }
 
-    // Visible state
-    &.is-visible {
-        .house__info {
-            h2 {
-                opacity: 1;
-                transform: translate3d(0,0,0);
-            }
-            .info {
-                opacity: 1;
-            }
-        }
-        .house__photo {
-            opacity: 1;
-
-            img {
-                transform: scale3d(1,1,1);
-            }
-        }
-    }
-
     // Photo number
     &__index {
         position: absolute;
@@ -206,4 +187,24 @@
             }
         }
     }
+
+    // Visible state
+    &.is-visible {
+        .house__info {
+            h2 {
+                opacity: 1;
+                transform: translate3d(0,0,0);
+            }
+            .info {
+                opacity: 1;
+            }
+        }
+        .house__photo {
+            opacity: 1;
+
+            img {
+                transform: scale3d(1,1,1);
+            }
+        }
+    }
 }