comment fixes

src/components/ListingCard/ListingCard.css

@@ -22,6 +22,13 @@
 .aspectWrapper {
   padding-bottom: 66.6667%; /* 3:2 Aspect Ratio */
   background: var(--matterColorNegative); /* Loading BG color */
+  transition: var(--transitionStyleButton);
+
+  &:hover {
+    transform: scale(1.02);
+    box-shadow: var(--boxShadowListingCard);
+    transition: var(--transitionStyleButton);
+  }
 }
 
 .rootForImage {

src/components/MapPriceMarker/MapPriceMarker.css

@@ -4,7 +4,7 @@
 .root {
   position: relative;
 
-  transform: translate( -50%, -33px);
+  transform: translate( -50%, -31px);
   width: auto;
   height: auto;
 }
@@ -52,8 +52,8 @@
 
 .caretShadow {
   /* Caret / arrow dimensions and position */
-  width: 10px;
-  height: 10px;
+  width: 6px;
+  height: 6px;
   position: absolute;
   bottom: -3px;
   left: 50%;
@@ -67,8 +67,8 @@
 .caret {
 
   /* Caret / arrow dimensions and position */
-  width: 10px;
-  height: 10px;
+  width: 6px;
+  height: 6px;
   position: absolute;
   bottom: -3px;
   left: 50%;

src/components/SearchResultsPanel/SearchResultsPanel.css

@@ -25,9 +25,9 @@
 
   @media screen and (min-width: 1024px) {
     /**
-     * resultPanelWidthRatio = 0.6 aka 60%
+     * resultPanelWidthRatio = 0.625 aka 62.5%
      * ((columnCount * ListingCardWidth + gutter * (columnCount + 1)) / resultPanelWidthRatio = 1000
-     * min-width: (2 * 264 + 24 * 3) / 0.6 = 1000
+     * min-width: (2 * 296 + 24 * 2) / 0.625 = 1024
      * flex-basis: calc((100%/columnCount) - (guttersBetweenColumns * gutterWidth / columnCount))
      */
     flex-basis: calc(50% - 12px);
@@ -35,21 +35,16 @@
   }
 
   @media screen and (min-width: 1921px) {
-    /* (3*264 + 24 * 4) / 0.6 = 1420 */
+    /**
+     * resultPanelWidthRatio = 0.625 aka 62.5%
+     * ((columnCount * ListingCardWidth + gutter * (columnCount + 1)) / resultPanelWidthRatio = 1000
+     * min-width: (3 * 368 + 24 * 4) / 0.625 = 1920
+     * flex-basis: calc((100%/columnCount) - (guttersBetweenColumns * gutterWidth / columnCount))
+     */
 
     flex-basis: calc(33.33% - 16px);
     margin-right: 24px;
   }
-
-  & img {
-    transition: var(--transitionStyleButton);
-  }
-
-  &:hover img {
-    transform: scale(1.02);
-    box-shadow: 0 0 50px 0 rgba(0,0,0,0.1);
-    transition: var(--transitionStyleButton);
-  }
 }
 
 /* Remove margin-right from listingCards on the last column */

src/components/TopbarDesktop/TopbarDesktop.css

@@ -240,8 +240,4 @@
   @media (--desktopViewport) {
     margin: 0;
   }
-
-  &:focus {
-    outline: none;
-  }
 }

src/containers/SearchPage/SearchPage.css

@@ -20,7 +20,7 @@
   flex-grow: 1;
   display: flex;
 
-  @media screen and (min-width: 768px) {
+  @media (--desktopViewport) {
     position: relative;
     padding-top: var(--topbarHeightDesktop);
     min-height: var(--containerHeight);
@@ -32,12 +32,12 @@
   display: flex;
   flex-direction: column;
 
-  @media screen and (min-width: 768px) and (max-width: 1023px) {
+  @media (--desktopViewport) {
     /**
      * .container is using flexbox,
      * This specifies that searchResultContainer is taking 60% from the viewport width
      */
-    flex-basis: 10%;
+    flex-basis: 50%;
   }
 
   @media screen and (min-width: 1024px) {
@@ -76,7 +76,7 @@
 .mapPanel {
   display: none;
 
-  @media screen and (min-width: 768px) {
+  @media (--desktopViewport) {
     /**
      * .container is using flexbox,
      * This specifies that mapPanel is taking 34% from the viewport width
@@ -94,7 +94,7 @@
 }
 
 .map {
-  @media screen and (min-width: 768px) {
+  @media (--desktopViewport) {
     position: fixed;
     top: var(--topbarHeightDesktop);
     right: 0;

src/marketplace.css

@@ -43,6 +43,7 @@
   --boxShadowPopup: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
   --boxShadowPopupLight: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
   --boxShadowButton: 0 4px 8px 0 rgba(0, 0, 0, 0.10);
+  --boxShadowListingCard: 0 0 50px 0 rgba(0,0,0,0.1);
 
   /* z-index base levels */
   /* small popups on UI should use z-indexes above 50 */