Needs more CSS

web/dist/main.css

@@ -1,7 +1,7 @@
 body {
   margin: 0;
   height: 100%;
-  font-family: "Roboto" , Helvetica, Arial, sans-serif;
+  font-family: "Arimo", "Roboto" , Helvetica, Arial, sans-serif;
   color: #333333;
 }
 
@@ -331,8 +331,118 @@ html {
   align-items: center;
 }
 
+.property-list-item {
+  padding: 0;
+  border-bottom: 1px solid rgb(230, 230, 230);
+  display: flex;
+  background-color: #ffffff;
+  height: 110px;
+}
+
+.pli-image {
+  flex: 2 2;
+}
+
+.pli-image img {
+  width: 100%;
+  height: 100%;
+}
+
+.pli-details {
+  position: relative;
+  padding: 10px;
+  display:  flex;
+  flex-direction: column;
+  flex: 3 3;
+}
+
+.price {
+  font-size: 21px;
+  padding: 5px 0;
+  border-bottom: 1px solid #f1f1f4;
+}
+
+.description {
+  font-size: 14px;
+  margin-top: 5px;
+}
+
+.address {
+  overflow: hidden;
+  font-size: 12px;
+}
+
+.street {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 3px;
+}
+
+.location {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-top: 3px;
+}
+
+.hours-ago {
+  color: #b7b6c1;
+  font-size: 13px;
+  text-align: right;
+  bottom: 10px;
+  right: 20px;
+  position: absolute;
+}
+
+@media (max-width: 400px) {
+  .hours-ago {
+    display: none;
+  }
+}
+
+@media (min-width : 768px) {
+  .property-list-item {
+    margin-bottom: 15px;
+    border: 1px solid #e6e6e6;
+    background: #fff;
+    cursor: pointer;
+    border-radius: 3px;
+    height: 100%;
+  }
+
+  .property-list-item:hover {
+    border: 1px solid rgb(182, 213, 59);
+  }
+
+  .price {
+    font-size: 28px;
+  }
+
+  .description {
+    font-size: 20px;
+    margin-top: 15px;
+  }
+
+  .address {
+    display: block;
+    font-size: 15px;
+    margin-top: 10px;
+  }
+
+  .street {
+    margin-left: 0;
+    padding-top: 15px;
+  }
+
+  .location {
+    padding-top: 5px;
+  }
+}
 
 @media (max-width : 768px) {
+  .listings-count {
+    display: none;
+  }
+
   #right {
     width: 100%;
   }