Globe: Smaller dots for close locations

src/style/molecules/_globe.scss

@@ -64,21 +64,32 @@
             display: block;
             top: -4px;
             left: -4px;
-            width: 8px;
-            height: 8px;
             padding: 4px;
-            border-radius: 50%;
             opacity: 1;
-            background: #ff6c89;
             will-change: transform;
 
+            // Dot
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 8px;
+                height: 8px;
+                background: $color-secondary;
+                border-radius: 100%;
+            }
+
             span {
                 transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
             }
 
             // Hover glow effect
             &.hover {
-                animation: globeMarkerPulse 1s;
+                &:before {
+                    animation: globeMarkerPulse 1s;
+                }
             }
 
             // 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;
                 }