Implement portraits as grid elements with relative offsets

1 files changed, 28 insertions, 5 deletions

diff --git a/artistes.css b/artistes.css
index 6e2007f..cc7b62b 100644
--- a/artistes.css
+++ b/artistes.css
@@ -14,10 +14,15 @@
 }
 
 .main #photos {
-    flex: 1;
-    align-self: flex-start;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+
     position: sticky;
     top: 0;
+
+    height: 80vh;
+
     background: #eee;
 }
 
@@ -27,11 +32,15 @@
 }
 
 #photos img {
-    width: 25%;
+    position: relative;
+    width: 14vw;
+    height: 40vh;
+    object-fit: cover;
+    object-position: center;
     border-color: #ddd;
-    border-width: 1vw;
+    border-width: 1vh;
     border-style: solid;
-    border-radius: 10%;
+    border-radius: 2vw;
     filter: grayscale(1);
     transition: filter 1s;
 }
@@ -39,3 +48,17 @@
 #photos img:hover {
     filter: none;
 }
+
+#photos img:nth-of-type(2) {
+    top: 2.8vw;
+    left: -2.8vw;
+}
+
+#photos img:nth-of-type(3) {
+    top: -1.8vw;
+    left: 2.8vw;
+}
+
+#photos img:nth-of-type(4) {
+    top: 1.0vw;
+}