Temporary Interactive globe

src/style/molecules/_globe.scss

@@ -1,7 +1,7 @@
 // Globe
 .globe {
-    z-index: 2;
     position: relative;
+    z-index: 2;
 
     .wrap {
         @include breakpoint (xs) {
@@ -9,16 +9,83 @@
         }
     }
 
-    // Image (for now)
+    // Image (temp)
     img {
+        position: relative;
+        z-index: 2;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 150%;
+        max-width: 1400px;
         display: inline-block;
-        margin: 0 auto;
         pointer-events: none;
         user-select: none;
     }
+
+    // Pins (temp)
+    &__pins {
+        position: absolute;
+        z-index: 3;
+        top: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 100%;
+
+        .pin {
+            margin: 16px 0;
+
+            &__name {
+                margin-left: 16px;
+            }
+        }
+    }
+
+    // Pin
+    .pin {
+        display: flex;
+        align-items: center;
+        // position: absolute;
+        // z-index: 2;
+
+        // Name
+        &__name {
+            padding: 8px 0;
+        }
+
+        // Dot
+        &__dot {
+            display: block;
+            width: 8px;
+            height: 8px;
+            background-color: $color-secondary;
+            border-radius: 100%;
+        }
+    }
+
+    // Place
+    .pin--place {
+        font-family: $font-serif;
+
+        a {
+            color: $color-secondary;
+            text-decoration: none;
+        }
+    }
+
+    // Country
+    .pin--country {
+        font-family: $font-sans;
+        font-size: rem(10px);
+        color: rgba(#fff, 0.5);
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
 }
 
-// Pin
 
 // Part globe
 .globe--part {