From a73c0e11a31f6bdc5ebc9774987dc260a05606e5 Mon Sep 17 00:00:00 2001
From: Shelby Kay <bonjour@shelbykay.dev>
Date: Tue, 19 Oct 2021 17:21:26 +0200
Subject: [PATCH] Image collage wip

---
 src/style/pages/_homepage.scss | 77 ++++++++++++++++++++++++----------
 1 file changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 396bd3e..be49540 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -82,19 +82,33 @@
     }
     &__collage {
         display: grid;
-        grid-template-columns: repeat(32, 1fr);
+        grid-template-columns: repeat(16, 1fr);
         grid-template-rows: repeat(2, 1fr);
         margin: 0 -140px;
 
+        @include bp (sm) {
+            grid-template-columns: repeat(32, 1fr);
+        }
+
         .photo-card {
             position: relative;
             display: block;
-            grid-column-end: span 8;
-            height: clamp(133px, 18vw, 400px);
+            grid-column-end: span 4;
             margin-left: auto;
             margin-right: auto;
             transform: rotate(var(--rotation)) translateZ(0);
 
+            @include bp (sm) {
+                height: clamp(156px, 18vw, 400px);
+                grid-column-end: span 8;
+            }
+
+            img {
+                display: block;
+                width: 100%;
+                height: auto;
+            }
+
             picture {
                 background: $color-primary-tertiary20;
             }
@@ -107,29 +121,38 @@
 
             // First row
             &:nth-child(1) {
-                display: none;
                 --rotation: -10.5deg;
-                z-index: 11;
-                grid-column-start: 2;
+                z-index: 5;
+                grid-column-start: 9;
                 grid-row: 1;
-                top: clamp(24px, 8vw, 128px);
+                top: -100px;
 
                 @include bp (sm) {
-                    display: block;
+                    z-index: 11;
+                    top: clamp(16px, 3vw, 48px);
+                    grid-column-start: 2;
                 }
             }
             &:nth-child(2) {
                 --rotation: 3deg;
-                z-index: 7;
+                z-index: 3;
                 grid-column-start: 7;
                 grid-row: 1;
                 margin-left: 0;
                 top: clamp(16px, 3vw, 48px);
+
+                @include bp (sm) {
+                    z-index: 7;
+                }
             }
             &:nth-child(3) {
-                z-index: 6;
+                z-index: 4;
                 grid-column-start: 13;
                 grid-row: 1;
+
+                @include bp (sm) {
+                    z-index: 6;
+                }
             }
             &:nth-child(4) {
                 --rotation: -3deg;
@@ -140,14 +163,15 @@
             }
             &:nth-child(5) {
                 --rotation: 10.5deg;
-                display: none;
-                z-index: 1;
-                grid-column-start: 24;
+                z-index: 6;
+                grid-column-start: 16;
                 grid-row: 1;
-                top: clamp(24px, 8vw, 128px);
+                top: -80px;
 
                 @include bp (sm) {
-                    display: block;
+                    z-index: 1;
+                    top: clamp(24px, 8vw, 128px);
+                    grid-column-start: 24;
                 }
             }
 
@@ -165,6 +189,7 @@
                 }
             }
             &:nth-child(7) {
+                display: none;
                 --rotation: -8deg;
                 grid-column-start: 5;
                 z-index: 9;
@@ -177,17 +202,27 @@
             }
             &:nth-child(8) {
                 --rotation: 8deg;
-                z-index: 5;
-                grid-column-start: 11;
+                z-index: 2;
+                grid-column-start: 10;
                 grid-row: 2;
                 top: calc(-1 * clamp(20px, 3vw, 48px));
+
+                @include bp (sm) {
+                    grid-column-start: 11;
+                }
             }
             &:nth-child(9) {
-                --rotation: 2deg;
-                z-index: 4;
-                grid-column-start: 15;
+                --rotation: -2deg;
+                z-index: 1;
+                grid-column-start: 16;
                 grid-row: 2;
                 top: calc(-1 * clamp(20px, 3vw, 48px));
+
+                @include bp (sm) {
+                    --rotation: 2deg;
+                    z-index: 4;
+                    grid-column-start: 15;
+                }
             }
             &:nth-child(10) {
                 --rotation: 8deg;
@@ -259,4 +294,4 @@
         color: rgba($color-tertiary, 0.3);
         margin-top: -60px;
     }
-}
\ No newline at end of file
+}