From 277005c59123f2b29a4202a035a342fc4431db4f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 17 Oct 2021 22:18:26 +0200
Subject: [PATCH] Create reusable class for Photo

---
 src/style/atoms/_photo.scss     | 25 +++++++++++++++++++++++++
 src/style/organisms/_house.scss | 10 ++++------
 src/style/pages/_photos.scss    | 24 ------------------------
 src/style/style.scss            |  1 +
 4 files changed, 30 insertions(+), 30 deletions(-)
 create mode 100644 src/style/atoms/_photo.scss

diff --git a/src/style/atoms/_photo.scss b/src/style/atoms/_photo.scss
new file mode 100644
index 0000000..f3f966e
--- /dev/null
+++ b/src/style/atoms/_photo.scss
@@ -0,0 +1,25 @@
+.photo {
+    overflow: hidden;
+    background: $color-primary-tertiary20;
+    border-radius: 6px;
+
+    a {
+        position: relative;
+        display: block;
+        height: 100%;
+        cursor: zoom-in;
+
+        & > picture {
+            height: 100%;
+
+            img {
+                display: block;
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                pointer-events: none;
+                user-select: none;
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/style/organisms/_house.scss b/src/style/organisms/_house.scss
index b38705e..b33e23a 100644
--- a/src/style/organisms/_house.scss
+++ b/src/style/organisms/_house.scss
@@ -41,15 +41,13 @@
         display: block;
         grid-column: 1 / span 17;
 
+        @include bp (sm) {
+            border-radius: 8px;
+        }
+
         picture {
             position: relative;
             z-index: 3;
-            overflow: hidden;
-            background: $color-primary-tertiary20;
-
-            @include bp (sm) {
-                border-radius: 8px;
-            }
         }
         img {
             display: block;
diff --git a/src/style/pages/_photos.scss b/src/style/pages/_photos.scss
index 6f1af6a..a8cf064 100644
--- a/src/style/pages/_photos.scss
+++ b/src/style/pages/_photos.scss
@@ -251,30 +251,6 @@
 
         // Photo
         .photo {
-            overflow: hidden;
-            border-radius: 6px;
-            background: $color-primary-tertiary20;
-
-            a {
-                position: relative;
-                display: block;
-                height: 100%;
-                cursor: zoom-in;
-
-                & > picture {
-                    height: 100%;
-
-                    img {
-                        display: block;
-                        width: 100%;
-                        height: 100%;
-                        object-fit: cover;
-                        pointer-events: none;
-                        user-select: none;
-                    }
-                }
-            }
-
             /**
              * Photo sizes
              */
diff --git a/src/style/style.scss b/src/style/style.scss
index 8c63dea..0a33699 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -40,6 +40,7 @@
 @import "atoms/discover";
 @import "atoms/box-cta";
 @import "atoms/site-title";
+@import "atoms/photo";
 
 // Molecules
 @import "molecules/photo-card";