Globe: Smaller dots for close locations

src/style/molecules/_globe.scss

@@ -64,13 +64,22 @@
             display: block;
             top: -4px;
             left: -4px;
+            padding: 4px;
+            opacity: 1;
+            will-change: transform;
+
+            // Dot
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
                 width: 8px;
                 height: 8px;
-            padding: 4px;
+                background: $color-secondary;
-            border-radius: 50%;
+                border-radius: 100%;
-            opacity: 1;
+            }
-            background: #ff6c89;
-            will-change: transform;
 
             span {
                 transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
@@ -78,8 +87,10 @@
 
             // Hover glow effect
             &.hover {
+                &:before {
                     animation: globeMarkerPulse 1s;
                 }
+            }
 
             // Label
             &__label {
@@ -120,7 +131,7 @@
                 }
                 .marker {
                     &__city {
-                        color: #FF6C89;
+                        color: $color-secondary;
                     }
                     &__country {
                         color: $color-text;
@@ -158,6 +169,12 @@
             // Marker is close to another one
             // Show the marker infos only on hover
             &.is-close {
+                // Dot
+                &:before {
+                    width: 7px;
+                    height: 7px;
+                }
+                // Label
                 .marker__label {
                     opacity: 0;
                 }