Add style to Photo Viewer page

src/style/atoms/_arrow.scss

@@ -6,4 +6,14 @@
             fill: #fff;
         }
     }
+
+    &--pink {
+        path {
+            fill: $color-secondary;
+        }
+    }
+
+    &--flip {
+        transform: rotate(180deg);
+    }
 }

src/style/atoms/_button-circle.scss

@@ -0,0 +1,15 @@
+.button-circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 56px;
+    background-color: #fff;
+    border-radius: 100vh;
+
+    & > * {
+        width: 22px;
+        height: 22px;
+        object-fit: contain;
+    }
+}

src/style/pages/_viewer-photo.scss

@@ -0,0 +1,141 @@
+.viewer-photo {
+    height: 100vh;
+
+    @include bp (md, max) {
+        display: block;
+    }
+
+    // Carousel
+    &__carousel {
+        display: grid;
+        grid-row-gap: 20px;
+        margin: auto 8px;
+        height: 100%;
+
+        @include bp (md) {
+            margin: auto 0;
+            grid-column: 3 / span 16;
+        }
+    }
+
+    // Images
+    &__images {
+        position: relative;
+        margin: auto 0 0;
+
+        .photo {
+            position: relative;
+            z-index: 3;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow:
+                0 12px 12px rgba(#000, 0.15),
+                0 20px 20px rgba(#000, 0.15),
+                0 48px 48px rgba(#000, 0.15);
+        }
+    }
+
+    // Infos
+    &__info {
+        margin-top: auto;
+        margin-bottom: 40px;
+        padding: 0 20px;
+        text-align: center;
+
+        @include bp (md) {
+            margin-top: 26px;
+            padding: 0;
+            text-align: left;
+        }
+        @include bp (lg) {
+            display: grid;
+            grid-template-columns: 55% 45%;
+            align-items: baseline;
+        }
+
+        h1 {
+            color: $color-secondary;
+            font-size: rem(32px);
+            line-height: 1.1;
+        }
+
+        // Details
+        .detail {
+            display: inline-block;
+            align-items: center;
+            margin-top: 24px;
+            color: $color-tertiary;
+            line-height: 1.5;
+
+            @include bp (lg) {
+                margin-top: 0;
+                margin-left: auto;
+                text-align: right;
+                padding-left: 16px;
+            }
+
+            // Icon
+            img {
+                display: inline-block;
+                margin-top: -5px;
+                margin-right: 12px;
+            }
+            // Separator
+            .sep {
+                display: inline-block;
+                margin: 0 4px;
+                line-height: 1;
+            }
+        }
+    }
+
+    // Index
+    &__index {
+        position: absolute;
+        z-index: 1;
+        left: 50%;
+        bottom: calc(92% + 1vw);
+        line-height: 1;
+        transform: translate3d(-50%, 0, 0);
+        color: rgba($color-tertiary, 0.4);
+
+        @include bp (md, max) {
+            font-size: clamp(#{rem(80px)}, 24vw, #{rem(120px)});
+        }
+        @include bp (md) {
+            top: 50%;
+            left: 95%;
+            width: 350px;
+            text-align: center;
+            bottom: auto;
+            transform: translate3d(0, -50%, 0);
+        }
+    }
+
+    // Controls
+    &__controls {
+        display: none;
+
+        @include bp (md) {
+            position: absolute;
+            z-index: 20;
+            display: flex;
+            left: -28px;
+            right: -28px;
+            top: 50%;
+            transform: translateY(-50%);
+            justify-content: space-between;
+        }
+    }
+
+    // Image
+    .photo {
+        grid-column: 3 / span 16;
+
+        img {
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}

src/style/style.scss

@@ -35,6 +35,7 @@
 // Atomic Design System
 // Atoms
 @import "atoms/button";
+@import "atoms/button-circle";
 @import "atoms/badge";
 @import "atoms/arrow";
 @import "atoms/discover";
@@ -59,7 +60,7 @@
 
 
 // Pages
-// @import "pages/page";
+@import "pages/viewer-photo";
 
 // Misc
 @import "animations";