WIP

src/style/organisms/_photos.scss

@@ -1,35 +1,44 @@
 .photos {
     position: relative;
     margin-top: -22px;
-    padding-bottom: 102px;
     background-color: #fff;
-    
+
     @include breakpoint (sm) {
         margin-top: -128px;
+        padding-top: 88px;
+    }
+    @include breakpoint (xl) {
         padding-top: 72px;
-        padding-bottom: 0;
     }
 
     // Sidebar
     &__side {
-        position: absolute;
-        z-index: 5;
-        top: 40px;
-        left: 24px;
-        height: 96%;
-        pointer-events: none;
-        
-        // Sticky
-        .sticky {
-            position: sticky;
-            top: 16px;
+        display: none;
+
+        @include breakpoint (md) {
             display: flex;
+            position: absolute;
+            z-index: 5;
+            left: 24px;
             flex-direction: row-reverse;
             align-items: flex-end;
             transform: rotate(270deg) translate(-46%,-240%);
             transform-origin: 50% 50%;
         }
 
+        // Container
+        &--wrap {
+            @include breakpoint (md) {
+                position: sticky;
+                z-index: 10;
+                top: 16px;
+                height: 100%;
+            }
+            @include breakpoint (xl) {
+                top: 32px;
+            }
+        }
+
         p {
             font-size: rem(12px);
             color: $color-lightgray;
@@ -43,13 +52,12 @@
         }
     }
 
-
     // Each photo
     .photo {
         position: relative;
         z-index: 4;
-        margin-bottom: 102px;
-        
+        margin-bottom: 104px;
+
         @include breakpoint (sm) {
             margin-bottom: 120px;
         }
@@ -60,59 +68,92 @@
         }
     }
 
-    // List view
+
+    /*
+    ** List view
+    */
     &--list {
-        & > .wrap {
+        .photos__view {
+            max-width: 100%;
+            margin: 0;
             padding: 0;
         }
 
         // Photo
-        .photo {
-            // Even photos
-            &:nth-child(even) {
-                // Location
-                .photo__location, h2 {
-                    text-align: right;
-                }
-    
-                // Image
-                .photo__image {
-                    justify-content: flex-end;
-    
-                    &--date {
-                        right: 100%;
-                        left: -30px;
-                    }
-                    &--number {
-                        right: 77%;
-                        left: auto;
+        @include breakpoint (sm) {
+            .photo {
+                // Even photos
+                &:nth-child(even) {
+                    // Location
+                    .photo__location, h2 {
                         text-align: right;
                     }
+
+                    // Image
+                    .photo__image {
+                        justify-content: flex-end;
+
+                        &--date {
+                            right: 100%;
+                            left: -30px;
+                        }
+                        &--number {
+                            right: 77%;
+                            left: auto;
+                            text-align: right;
+                        }
+                    }
                 }
             }
         }
+
+        // Pagination
+        .pagination {
+            margin-top: 104px;
+
+            @include breakpoint (sm) {
+                margin-top: -64px;
+            }
+        }
     }
 
-    // Grid view
+
+    /*
+    ** Grid view
+    */
     &--grid {
-        & > .wrap {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            grid-column-gap: 48px;
-            grid-row-gap: 72px;
-            padding-left: 192px;
-            padding-right: 64px;
+        .photos__view {
+            @include breakpoint (md) {
+                display: grid;
+                grid-template-columns: repeat(2, 1fr);
+                grid-column-gap: 48px;
+                grid-row-gap: 72px;
+                padding-left: 192px;
+                padding-right: 64px;
+            }
+            @include breakpoint (xxl) {
+                padding-left: 192px;
+            }
+            @include breakpoint (1648px) {
+                padding-right: 0;
+            }
         }
 
         // Photo
         .photo {
             display: flex;
             flex-direction: column-reverse;
-            margin-bottom: 0;
+            margin-bottom: 72px;
+
+            @include breakpoint (md) {
+                margin-bottom: 0;
+            }
 
             // Every second (on column 2)
             &:nth-child(2n+2) {
-                transform: translateY(-64px);
+                @include breakpoint (md) {
+                    transform: translateY(-64px);
+                }
             }
 
             .wrap, .wrapper {
@@ -123,7 +164,7 @@
             // Location
             &__location {
                 text-align: left;
-            
+
                 h2 {
                     font-size: rem(28px);
                     margin-top: 28px;
@@ -152,5 +193,10 @@
                 }
             }
         }
+
+        // Pagination
+        .pagination {
+            margin-top: 64px;
+        }
     }
 }