#46 Large map

components/03_Organisms/osmMap/_osmMap.scss

@@ -1,28 +1,43 @@
-.LP-Map{
+.LP-Map {
     margin-bottom: $-spacing-medium;
-    .ol-attribution{
+
+    &--wide {
+        height: 300px;
+    }
+
+    &--full {
+        height: 100%;
+        width: 100%;
+    }
+
+    .ol-attribution {
         font-family: $-primary-sans-serif-font;
         color: $-grey;
 
-        a{
+        a {
             color: $-light-brown;
 
-            &:hover, &:focus {
+            &:hover,
+            &:focus {
                 color: $-beige;
             }
         }
     }
 
-    .ol-zoom{
-        &-in, &-out{
+    .ol-zoom {
+
+        &-in,
+        &-out {
             background-color: $-light-brown;
-            &:hover, &:focus{
+
+            &:hover,
+            &:focus {
                 background-color: $-grey;
             }
         }
     }
 
-    .LP-Map__Popup{
+    .LP-Map__Popup {
         font-family: $-primary-sans-serif-font;
         color: $-grey;
         background-color: $-almost-white;

public/main.css

@@ -1701,6 +1701,11 @@ body {
 
 .LP-Map {
   margin-bottom: 25px; }
+  .LP-Map--wide {
+    height: 300px; }
+  .LP-Map--full {
+    height: 100%;
+    width: 100%; }
   .LP-Map .ol-attribution {
     font-family: "Montserrat", Helvetica, sans-serif;
     color: #565656; }