diff --git a/src/components/BookingBreakdown/BookingBreakdown.css b/src/components/BookingBreakdown/BookingBreakdown.css
index c0ad7be1..b4588e7e 100644
--- a/src/components/BookingBreakdown/BookingBreakdown.css
+++ b/src/components/BookingBreakdown/BookingBreakdown.css
@@ -17,7 +17,7 @@
    baseline. */
   margin: -1px 0 0 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: -1px 0 0 0;
   }
 
@@ -56,7 +56,7 @@
   @apply --marketplaceH2FontStyles;
   margin: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: 0;
   }
 }
diff --git a/src/components/DateRangeInputField/DateRangeInput.css b/src/components/DateRangeInputField/DateRangeInput.css
index ee1f6dd5..45d1accc 100644
--- a/src/components/DateRangeInputField/DateRangeInput.css
+++ b/src/components/DateRangeInputField/DateRangeInput.css
@@ -67,7 +67,7 @@
     margin-top: 0;
     margin-bottom: 0;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       margin-top: 0;
       margin-bottom: 0;
     }
diff --git a/src/components/DateRangeInputField/DateRangeInputField.css b/src/components/DateRangeInputField/DateRangeInputField.css
index d50e3fe5..2d6b84bb 100644
--- a/src/components/DateRangeInputField/DateRangeInputField.css
+++ b/src/components/DateRangeInputField/DateRangeInputField.css
@@ -19,7 +19,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/components/HeroSection/HeroSection.css b/src/components/HeroSection/HeroSection.css
index 756394dc..59c781c5 100644
--- a/src/components/HeroSection/HeroSection.css
+++ b/src/components/HeroSection/HeroSection.css
@@ -43,7 +43,7 @@
   margin-top: auto;
   margin-bottom: 22px;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
     margin-top: auto;
     margin-bottom: 22px;
@@ -55,7 +55,7 @@
   margin-bottom: 63px;
   margin-top: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     max-width: var(--desktopTitleMaxWidth);
   }
 }
@@ -64,7 +64,7 @@
   border-radius: 4px;
   flex-shrink: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: none;
   }
 }
@@ -85,7 +85,7 @@
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: block;
     width: 400px;
   }
diff --git a/src/components/ListingCard/ListingCard.css b/src/components/ListingCard/ListingCard.css
index dc8f6359..35c72165 100644
--- a/src/components/ListingCard/ListingCard.css
+++ b/src/components/ListingCard/ListingCard.css
@@ -66,7 +66,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -81,7 +81,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -102,7 +102,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -118,7 +118,7 @@
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
index 80e8096b..f510edb6 100644
--- a/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
+++ b/src/components/LocationAutocompleteInput/LocationAutocompleteInput.css
@@ -28,7 +28,7 @@
   stroke: var(--marketplaceColor);
   stroke-width: 2.5px;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     stroke-width: 2px;
   }
 
@@ -85,7 +85,7 @@ bottom of the container.
   background-size: auto var(--poweredImageHeight);
   background-position: center;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     background-position: center left var(--sidePaddingDesktop);
   }
 }
@@ -105,7 +105,7 @@ bottom of the container.
     /* Assign enough vertical padding to make the element at least 44px high */
     padding: 9px var(--sidePadding);
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       color: var(--matterColorLightTransparent);
       padding: 10px var(--sidePaddingDesktop);
       margin: 0;
diff --git a/src/components/MapPriceMarker/MapPriceMarker.css b/src/components/MapPriceMarker/MapPriceMarker.css
index bbf7c783..1f6fd2e9 100644
--- a/src/components/MapPriceMarker/MapPriceMarker.css
+++ b/src/components/MapPriceMarker/MapPriceMarker.css
@@ -44,7 +44,7 @@
   }
 
   /* Overwrite dimensions from font styles */
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/components/MapPriceMarker/OverlayLayer.js b/src/components/MapPriceMarker/OverlayLayer.js
index 616968e3..d4bf6e7e 100644
--- a/src/components/MapPriceMarker/OverlayLayer.js
+++ b/src/components/MapPriceMarker/OverlayLayer.js
@@ -8,29 +8,28 @@ class OverlayLayer extends Component {
     this.onAdd = this.onAdd.bind(this);
     this.onRemove = this.onRemove.bind(this);
     this.draw = this.draw.bind(this);
+    this.overlayView = null;
     this.overlayContainer = null;
+  }
 
+  componentDidMount() {
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#OverlayView
-    const overlayView = new window.google.maps.OverlayView();
+    this.overlayView = new window.google.maps.OverlayView();
 
     // As stated by Google these three methods must implemented: onAdd(), draw(), and onRemove().
-    overlayView.onAdd = this.onAdd;
-    overlayView.draw = this.draw;
-    overlayView.onRemove = this.onRemove;
+    this.overlayView.onAdd = this.onAdd;
+    this.overlayView.draw = this.draw;
+    this.overlayView.onRemove = this.onRemove;
 
     // You must call setMap() with a valid Map object to trigger the call to
     // the onAdd() method and setMap(null) in order to trigger the onRemove() method.
-    overlayView.setMap(props.map);
+    this.overlayView.setMap(this.props.map);
 
-    this.state = { overlayView };
-  }
-
-  componentWillMount() {
     const onAddOverlay = this.props.onAddOverlay;
     if (onAddOverlay) {
       // If onAddOverlay is saving anything to parent component's state,
       // it must be called here to avoid warnings.
-      onAddOverlay(this.state.overlayView);
+      onAddOverlay(this.overlayView);
     }
   }
 
@@ -39,7 +38,7 @@ class OverlayLayer extends Component {
   }
 
   componentWillUnmount() {
-    const overlayView = this.state.overlayView;
+    const overlayView = this.overlayView;
     if (overlayView) {
       overlayView.setMap(null);
       overlayView.onAdd = null;
@@ -62,9 +61,8 @@ class OverlayLayer extends Component {
   }
 
   draw() {
-    const overlayView = this.state.overlayView;
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapCanvasProjection
-    const overlayProjection = overlayView.getProjection();
+    const overlayProjection = this.overlayView.getProjection();
 
     // render children to overlayContainer.
     if (this.overlayContainer) {
@@ -74,7 +72,7 @@ class OverlayLayer extends Component {
 
     // Add the element to the "overlayMouseTarget" pane.
     // https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapPanes
-    const mapPanes = this.state.overlayView.getPanes();
+    const mapPanes = this.overlayView.getPanes();
 
     if (mapPanes && this.overlayContainer) {
       const geolocation = this.props.geolocation;
diff --git a/src/components/NotificationBadge/NotificationBadge.css b/src/components/NotificationBadge/NotificationBadge.css
index 321aabf0..74220007 100644
--- a/src/components/NotificationBadge/NotificationBadge.css
+++ b/src/components/NotificationBadge/NotificationBadge.css
@@ -21,7 +21,7 @@
   /* Font margins off */
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/components/OrderDetailsPanel/OrderDetailsPanel.css b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
index 9b67460a..8460c0be 100644
--- a/src/components/OrderDetailsPanel/OrderDetailsPanel.css
+++ b/src/components/OrderDetailsPanel/OrderDetailsPanel.css
@@ -37,7 +37,7 @@
 
   margin-top: 5px;
   margin-bottom: 14px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 5px;
     margin-bottom: 14px;
   }
diff --git a/src/components/ResponsiveImage/ResponsiveImage.css b/src/components/ResponsiveImage/ResponsiveImage.css
index b858b95c..fa2bfbc3 100644
--- a/src/components/ResponsiveImage/ResponsiveImage.css
+++ b/src/components/ResponsiveImage/ResponsiveImage.css
@@ -30,7 +30,7 @@
   padding-bottom: 24px;
 
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-bottom: 0;
   }
 }
diff --git a/src/components/SaleDetailsPanel/SaleDetailsPanel.css b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
index ff145c5b..dacd8518 100644
--- a/src/components/SaleDetailsPanel/SaleDetailsPanel.css
+++ b/src/components/SaleDetailsPanel/SaleDetailsPanel.css
@@ -18,7 +18,7 @@
   flex: 1;
   margin: 0 12px 0 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: 0 12px 0 0;
   }
 }
@@ -46,7 +46,7 @@
 
   margin-top: 5px;
   margin-bottom: 14px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 5px;
     margin-bottom: 14px;
   }
diff --git a/src/components/TabNav/TabNav.css b/src/components/TabNav/TabNav.css
index c9781e39..1c68d95c 100644
--- a/src/components/TabNav/TabNav.css
+++ b/src/components/TabNav/TabNav.css
@@ -30,7 +30,7 @@
     color: var(--matterColorDark);
   }
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/components/Topbar/Topbar.css b/src/components/Topbar/Topbar.css
index 2eef722e..05bd601e 100644
--- a/src/components/Topbar/Topbar.css
+++ b/src/components/Topbar/Topbar.css
@@ -25,7 +25,7 @@
   /* shadows */
   box-shadow: var(--boxShadow);
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: none;
   }
 }
@@ -100,7 +100,7 @@
 .desktop {
   display: none;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: block;
   }
 }
diff --git a/src/components/TopbarDesktop/TopbarDesktop.css b/src/components/TopbarDesktop/TopbarDesktop.css
index 7e782dcc..5b15bb07 100644
--- a/src/components/TopbarDesktop/TopbarDesktop.css
+++ b/src/components/TopbarDesktop/TopbarDesktop.css
@@ -10,7 +10,7 @@
     margin: 24px 0;
     text-decoration: inherit;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       margin: 24px 0;
     }
   }
@@ -112,7 +112,7 @@
     color: var(--marketplaceColorDark);
   }
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
    margin-top: 0;
    margin-bottom: 0;
   }
@@ -136,7 +136,7 @@
     color: var(--matterColorDark);
   }
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
    margin-top: 0;
    margin-bottom: 0;
   }
@@ -237,7 +237,7 @@
     border-left: 6px solid var(--marketplaceColor);
   }
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: 0;
   }
 }
diff --git a/src/containers/BookingDatesForm/BookingDatesForm.css b/src/containers/BookingDatesForm/BookingDatesForm.css
index 1ccba2a9..e9e9390d 100644
--- a/src/containers/BookingDatesForm/BookingDatesForm.css
+++ b/src/containers/BookingDatesForm/BookingDatesForm.css
@@ -21,7 +21,7 @@
 
   margin-top: 5px;
   margin-bottom: 14px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 5px;
     margin-bottom: 14px;
   }
@@ -45,7 +45,7 @@
   margin: auto 24px 20px 24px;
   flex-shrink: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/containers/CheckoutPage/CheckoutPage.css b/src/containers/CheckoutPage/CheckoutPage.css
index b1a00c5d..35afcf2f 100644
--- a/src/containers/CheckoutPage/CheckoutPage.css
+++ b/src/containers/CheckoutPage/CheckoutPage.css
@@ -19,7 +19,7 @@
   width: 100%;
   margin-top: 0;
   margin-bottom: 7px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 7px;
   }
@@ -43,7 +43,7 @@
 
   margin-top: 0;
   margin-bottom: 14px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 14px;
   }
@@ -63,7 +63,7 @@
 
   margin-top: 0;
   margin-bottom: 14px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 14px;
   }
@@ -97,7 +97,7 @@
   /* shadows */
   box-shadow: var(--boxShadow);
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: none;
   }
 }
diff --git a/src/containers/EditListingPage/EditListingPage.css b/src/containers/EditListingPage/EditListingPage.css
index 817e2b01..74a6ac58 100644
--- a/src/containers/EditListingPage/EditListingPage.css
+++ b/src/containers/EditListingPage/EditListingPage.css
@@ -17,7 +17,7 @@
   /* shadows */
   box-shadow: none;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: none;
   }
 }
diff --git a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
index 157a0100..c0310325 100644
--- a/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
+++ b/src/containers/EditListingPhotosForm/EditListingPhotosForm.css
@@ -74,7 +74,7 @@
 
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
    }
@@ -86,7 +86,7 @@
 
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
    }
diff --git a/src/containers/InboxPage/InboxPage.css b/src/containers/InboxPage/InboxPage.css
index e68a4d75..06a7f591 100644
--- a/src/containers/InboxPage/InboxPage.css
+++ b/src/containers/InboxPage/InboxPage.css
@@ -17,7 +17,7 @@
   /* shadows */
   box-shadow: none;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     display: none;
   }
 }
@@ -46,7 +46,7 @@
   /* Layout */
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -136,7 +136,7 @@
 
   margin-top: 3px;
   margin-bottom: 0px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -148,7 +148,7 @@
 
   margin-top: 0px;
   margin-bottom: 0px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 4px;
     margin-bottom: 0;
   }
@@ -160,7 +160,7 @@
 
   margin-top: 4px;
   margin-bottom: 0px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 4px;
     margin-bottom: 0;
   }
diff --git a/src/containers/LandingPage/LandingPage.css b/src/containers/LandingPage/LandingPage.css
index 57b5b6c4..d636aed8 100644
--- a/src/containers/LandingPage/LandingPage.css
+++ b/src/containers/LandingPage/LandingPage.css
@@ -11,7 +11,7 @@
   flex-direction: column;
   min-height: calc(100vh - var(--topbarHeight));
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     min-height: calc(100vh - var(--topbarHeightDesktop));
   }
 }
diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index e9a2c072..222df623 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -68,7 +68,7 @@
   background-color: var(--matterColorAnti);
   color: var(--matterColorLight);
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -94,7 +94,7 @@
   width: 100%;
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -105,7 +105,7 @@
   @apply --marketplaceH4FontStyles;
   margin-top: 7px;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -122,7 +122,7 @@
 
   margin-top: 0;
   margin-bottom: 13px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 13px;
   }
@@ -131,7 +131,7 @@
 .description {
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -148,7 +148,7 @@
 
   margin-top: 0;
   margin-bottom: 20px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 24px;
   }
@@ -193,7 +193,7 @@
 
   margin-top: 0;
   margin-bottom: 0px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
@@ -206,7 +206,7 @@
 
   margin-top: 0;
   margin-bottom: 0px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
index 3944218d..45840db0 100644
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
@@ -14,7 +14,7 @@
 
   margin-top: 0;
   margin-bottom: 13px;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 13px;
   }
diff --git a/src/containers/SearchPage/SearchPage.css b/src/containers/SearchPage/SearchPage.css
index e9e0f358..00ed4277 100644
--- a/src/containers/SearchPage/SearchPage.css
+++ b/src/containers/SearchPage/SearchPage.css
@@ -5,7 +5,7 @@
 }
 
 .topbar {
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     position: fixed;
     top: 0;
     left: 0;
@@ -20,7 +20,7 @@
   flex-grow: 1;
   display: flex;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     position: relative;
     padding-top: var(--topbarHeightDesktop);
     min-height: var(--containerHeight);
@@ -32,7 +32,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     /**
      * .container is using flexbox,
      * This specifies that searchResultContainer is taking 60% from the viewport width
@@ -76,7 +76,7 @@
 .mapPanel {
   display: none;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     /**
      * .container is using flexbox,
      * This specifies that mapPanel is taking 34% from the viewport width
@@ -94,7 +94,9 @@
 }
 
 .map {
-  @media (--desktopViewport) {
+  
+  @media (--viewportMedium) {
+    /* Map is fixed so that it doesn't scroll along search results */
     position: fixed;
     top: var(--topbarHeightDesktop);
     right: 0;
diff --git a/src/containers/StyleguidePage/StyleguidePage.css b/src/containers/StyleguidePage/StyleguidePage.css
index a355503c..18440a1c 100644
--- a/src/containers/StyleguidePage/StyleguidePage.css
+++ b/src/containers/StyleguidePage/StyleguidePage.css
@@ -4,7 +4,7 @@
   display: flex;
   flex-direction: column;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     flex-direction: row;
   }
 }
@@ -12,7 +12,7 @@
 .withPadding {
   padding: calc(2 * var(--spacingUnit));
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     padding: calc(2 * var(--spacingUnitDesktop));
   }
 }
@@ -21,7 +21,7 @@
 .defaultWrapperStyles {
   margin: calc(2 * var(--spacingUnit)) 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: calc(2 * var(--spacingUnitDesktop)) 0;
   }
 }
@@ -37,7 +37,7 @@
   flex-grow: 1;
   composes: withPadding;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     padding: 48px 0 0 16px;
   }
 }
@@ -74,7 +74,7 @@
   background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10M0 06h10M0 12h10" stroke="#ccc" shape-rendering="crispEdges" /><path d="M0 18h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /></svg>');
   background-repeat: repeat;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
       background-image: url('data:image/svg+xml;utf8,<svg width="10" height="24" viewBox="0 0 10 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h10" stroke="#ddd" stroke-width="1" shape-rendering="crispEdges" /><path d="M0 08h10M0 16h10M0" stroke="#ccc" shape-rendering="crispEdges" /></svg>');
       background-repeat: repeat;
   }
@@ -83,7 +83,7 @@
 .spacing2x {
   margin: calc(2 * var(--spacingUnit)) 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin: calc(2 * var(--spacingUnitDesktop)) 0;
   }
 }
@@ -93,7 +93,7 @@
   flex-wrap: wrap;
   margin-top: 15px;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 19px;
   }
 }
@@ -106,7 +106,7 @@
   margin-right: calc(2 * var(--spacingUnit));
   margin-bottom: calc(2 * var(--spacingUnit) + 2px);
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-right: calc(2 * var(--spacingUnitDesktop));
     margin-bottom: calc(2 * var(--spacingUnitDesktop) + 2px);
   }
@@ -130,7 +130,7 @@
   border-width: 1px;
   border-top-color: transparent;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     padding: calc(2 * var(--spacingUnitDesktop) - 3px) calc(2 * var(--spacingUnitDesktop));
   }
 }
@@ -180,7 +180,7 @@
   background-color: #fff;
   padding: calc(2 * var(--spacingUnit));
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     padding: calc(2 * var(--spacingUnitDesktop) - 2px) calc(2 * var(--spacingUnitDesktop));
   }
 }
diff --git a/src/containers/TopbarSearchForm/TopbarSearchForm.css b/src/containers/TopbarSearchForm/TopbarSearchForm.css
index 2a93bf6a..a26a535a 100644
--- a/src/containers/TopbarSearchForm/TopbarSearchForm.css
+++ b/src/containers/TopbarSearchForm/TopbarSearchForm.css
@@ -70,7 +70,7 @@
 
   margin-top: 0;
   margin-bottom: 0;
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
     font-weight: var(--fontWeightSemiBold);
diff --git a/src/marketplace.css b/src/marketplace.css
index ae46f21e..7d9063ee 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -94,7 +94,7 @@
     line-height: 24px;
     letter-spacing: -0.3px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       /* TODO: Make sure button text aligns with the baseline */
     }
   }
@@ -238,7 +238,9 @@
 
 /* ================ Custom media queries ================ */
 
-@custom-media --desktopViewport (min-width: 768px);
+@custom-media --viewportMedium (min-width: 768px);
+@custom-media --viewportLarge (min-width: 1024px);
+@custom-media --viewportXLarge (min-width: 1921px);
 
 /* ================ Fonts ================ */
 
@@ -299,7 +301,7 @@ label {
   margin-top: 0;
   margin-bottom: 0;
 
-  @media (--desktopViewport) {
+  @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
   }
diff --git a/src/marketplaceFonts.css b/src/marketplaceFonts.css
index 5acfb66f..18c44cc3 100644
--- a/src/marketplaceFonts.css
+++ b/src/marketplaceFonts.css
@@ -15,7 +15,7 @@
     letter-spacing: -0.1px;
     /* No margins for default font */
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-size: 20px;
       line-height: 24px;
     }
@@ -31,7 +31,7 @@
     margin-top: 12px;
     margin-bottom: 12px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-size: 20px;
       line-height: 24px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
@@ -50,7 +50,7 @@
     margin-top: 25px;
     margin-bottom: 29px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-size: 90px;
       line-height: 96px;
       letter-spacing: -2px;
@@ -69,7 +69,7 @@
     margin-top: 18px;
     margin-bottom: 18px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-size: 48px;
       line-height: 56px;
       letter-spacing: -1px;
@@ -88,7 +88,7 @@
     margin-top: 21px;
     margin-bottom: 17px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       line-height: 32px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 21px;
@@ -105,7 +105,7 @@
     margin-top: 16px;
     margin-bottom: 14px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 16px;
       margin-bottom: 16px;
@@ -121,7 +121,7 @@
     margin-top: 12px;
     margin-bottom: 12px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-weight: var(--fontWeightMedium);
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 17px;
@@ -138,7 +138,7 @@
     margin-top: 10px;
     margin-bottom: 8px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       font-size: 16px;
       line-height: 20px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
@@ -157,7 +157,7 @@
     margin-top: 10px;
     margin-bottom: 8px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       line-height: 16px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 10px;
@@ -174,7 +174,7 @@
     margin-top: 9.5px;
     margin-bottom: 8.5px;
 
-    @media (--desktopViewport) {
+    @media (--viewportMedium) {
       line-height: 16px;
       /* margin-top + n * line-height + margin-bottom => x * 8px */
       margin-top: 10.5px;