Init project

src/components/Object/Object.scss

@@ -0,0 +1,109 @@
+@import '../../styles/vars.scss';
+
+.item__info p {
+    margin: 0 0 12px 0;
+}
+
+.item {
+    display: flex;
+    flex-direction: column;
+    // width: 381px;
+    // height: 381px;
+    margin: 0 20px;
+    border-radius: 15px;
+    background-color: white;
+
+    @media (max-width: 1300px) {
+        height: 381px;
+    }
+
+    @media (max-width: 1200px) {
+        height: 361px;
+    }
+
+    @media (max-width: 1100px) {
+        height: 341px;
+    }
+
+    @media (max-width: $laptopWidth) {
+        height: 321px;
+        margin: 0 15px;
+    }
+
+    @media (max-width: $tabletWidth) {
+        height: 505px;
+    }
+
+    @media (max-width: 740px) {
+        height: 473px;
+    }
+
+    @media (max-width: 690px) {
+        height: 435px;
+    }
+
+    @media (max-width: 635px) {
+        height: 400px;
+    }
+
+    @media (max-width: 570px) {
+        height: 361px;
+    }
+
+    @media (max-width: $mobileWidth) {
+        height: 381px;
+    }
+
+    @media (max-width: 420px) {
+        height: 361px;
+    }
+}
+
+.item__image:hover {
+    text-decoration: none;
+}
+
+.item__image {
+    border-top-right-radius: 15px;
+    border-top-left-radius: 15px;
+}
+
+.item__info {
+    margin: 25px 0 13px 25px;
+}
+
+.item__price {
+    font-size: 25px;
+
+    @media (min-width: 1800px) {
+        font-size: 29px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 23px;
+    }
+}
+
+.item__desc {
+    font-size: 20px;
+
+    @media (min-width: 1800px) {
+        font-size: 24px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 18px;
+    }
+}
+
+.item__address {
+    font-size: 17px;
+
+    @media (min-width: 1800px) {
+        font-size: 21px;
+    }
+
+    @media (min-width: 768.98px) and (max-width: $laptopWidth) {
+        font-size: 16px;
+    }
+}