nestiq-component-library 1.1.91 → 1.1.93

package/src/components/NewPropertyCard/NewPropertyCard.css

@@ -1,372 +1,370 @@
-.padding-global {
-  height: 737px !important;
-  padding: 0 40px;
-}
-.header {
-  font-size: 48px;
-  font-weight: 600;
-  color: #1b1b1b;
-}
-.listing-compacts {
-  max-width: 750px;
-  align-self: stretch;
-  flex-grow: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  align-items: flex-start;
-  gap: 16px;
-  border-radius: 0px 32px 32px 0px;
-  /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
-  background-color: rgba(58, 58, 58, 0.068);
-  height: 460px;
-  padding: 32px;
-}
-.cardStyles {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 460px;
-  border-radius: 32px 0px 0px 32px !important;
-}
-.cardTag {
-  width: 75px;
-  height: 30px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 6px;
-  padding: 0 24px;
-  border-radius: 16px;
-  border: solid 1px #313131;
-  background-color: #fff;
-}
-.Grundriss {
-  width: 120px;
-  height: 30px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  font-size: 14px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background: linear-gradient(to top, #000, #666);
-}
-.Frame-136 {
-  height: 119px;
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 16px;
-  padding: 10px 16px;
-  border-radius: 16px;
-  border: solid 1px rgba(0, 0, 0, 0.1);
-  background-color: #fff;
-}
-.kontactbutton {
-  width: 180px;
-  height: 43px;
-  flex-grow: 0;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background: linear-gradient(to top, #000, #666);
-}
-.kontact-button-text {
-  flex-grow: 0;
-  font-family: Inter;
-  font-size: 16px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #fff;
-}
-.propertyTitle {
-  display: flex;
-  flex-grow: 0;
-  font-size: 24px;
-  font-weight: 580;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: start;
-  color: #313131;
-}
-.firstLabel {
-  width: 100px;
-  height: 25px;
-  gap: 6px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #031012 !important;
-  background-color: var(--main-yellow);
-}
-
-.secondLabel {
-  width: 85px;
-  height: 25px;
-  padding: 0 7px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-  display: flex;
-}
-
-.thirdLabels {
-  width: 110px;
-  padding: 0 7px;
-  height: 25px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-  display: flex;
-}
-
-.fourthLabels {
-  padding: 2px;
-
-  width: 100px;
-  height: 25px;
-  border-radius: 16px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  border: solid 1px #000;
-  background-color: #fff;
-}
-
-.layersVector {
-  width: 15.1px;
-  height: 16px;
-}
-
-.layersText {
-  font-size: 14px;
-  color: #1b1b1b;
-}
-
-.style-img {
-  object-fit: cover;
-  border-radius: 30px !important;
-}
-
-.Vector {
-  width: 12px;
-  height: 16.1px;
-  flex-grow: 0;
-  margin: 0.4px 6px 0.4px 0;
-}
-
-.customButton {
-  width: 262px;
-  height: 43px;
-  color: #000;
-  cursor: pointer;
-  border-color: #161410;
-  background-color: #181716;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-}
-.button_text {
-  font-size: 16px;
-  font-weight: 500;
-  color: #1b1b1b;
-}
-
-.heartVector {
-  width: 23px;
-  height: 26.7px;
-  cursor: pointer;
-}
-
-.heartVector.liked {
-  fill: rgb(255, 255, 255) !important;
-}
-.locationTexts {
-  font-size: 14px;
-  color: #344041;
-  text-align: center;
-}
-
-.arrowVector {
-  width: 23px;
-  height: 23px;
-  flex-grow: 0;
-  object-fit: contain;
-}
-.card{
-max-width: 750px;
-}
-
-.Price {
-  font-size: 26px;
-  font-weight: 500;
-  font-stretch: normal;
-  font-style: normal;
-  line-height: normal;
-  letter-spacing: normal;
-  text-align: center;
-  color: #ffffff;
-}
-
-.details {
-  font-size: 14px;
-  text-align: center;
-  color: #344041;
-}
-.value {
-  font-size: 20px;
-  text-align: center;
-  font-weight: 500;
-}
-
-.class {
-  background-color: #1b1b1b;
-}
-
-.header {
-  height: 64px;
-  justify-content: center;
-}
-
-.rightConer {
-  width: 200px;
-}
-@media all and (min-width: 2560px) {
-  .header {
-    font-size: 38px;
-
-    display: flex;
-  }
-  .cardStyle {
-    gap: 0px;
-    width: 350px;
-    height: 300px;
-    /* margin-left: 250px; */
-  }
-}
-@media (max-width: 1399px) {
-  .header {
-    font-size: 38px;
-    align-self: center;
-    margin-left: 150px;
-  }
-  .cardStyle {
-    gap: 0px;
-    width: 350px;
-    height: 300px;
-  }
-}
-
-@media (max-width: 1199px) {
-  .header {
-    font-size: 38px;
-  }
-  .cardStyle {
-    width: 300px;
-    height: 250px;
-  }
-}
-
-@media (max-width: 575px) {
-  .detail {
-    font-size: 11px;
-    padding: 2px;
-  }
-  .Price {
-    font-size: 19px;
-  }
-  .header {
-    font-size: 28px;
-  }
-  .locationText {
-    font-size: 12px;
-  }
-  .customButton {
-    width: 200px !important;
-  }
-  .button_text {
-    font-size: 13px;
-  }
-}
-
-@media (max-width: 375px) {
-  .labelTopClass {
-    width: 105px !important;
-  }
-  .layersText {
-    font-size: 9px;
-  }
-  .firstLabel {
-    gap: 2px;
-  }
-  .layersVector {
-    width: 9px;
-    height: 10px;
-    gap: 0px;
-  }
-  .cardStyle {
-    width: 320px !important;
-    height: 220px !important;
-  }
-  .header {
-    font-size: 24px;
-  }
-  .detail {
-    font-size: 10px;
-    padding: 2px;
-  }
-  .Price {
-    font-size: 18px;
-  }
-  .locationText {
-    font-size: 10px;
-  }
-  .Vector {
-    width: 8px;
-    height: 16px;
-    margin: 0px 2px 0.4px;
-  }
-}
-
-@media (max-width: 280px) {
-  .cardStyle {
-    width: 260px !important;
-    height: 160px !important;
-  }
-  .detail {
-    margin-bottom: 5px;
-    font-size: 0.6ch;
-  }
-  .Price {
-    font-size: 9px;
-  }
-  .locationText {
-    font-size: 6px;
-  }
-  .Vector {
-    width: 7px;
-    height: 10px;
-    margin: 0px 2px 4px;
-  }
-  .heartVector {
-    width: 15px;
-    height: 20px;
-  }
-}
+.property-card {
+  width: 100%;
+  max-width: 1280px;
+
+  @media (min-width: 1500px) {
+    max-width: 1280px;
+    margin: 0 auto;
+  }
+}
+
+.listing-compacts {
+  max-width: 750px;
+  align-self: stretch;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  border-radius: 0px 32px 32px 0px;
+  /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */
+  background-color: rgba(58, 58, 58, 0.068);
+  height: 460px;
+  padding: 32px;
+}
+.cardStyles {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 460px;
+  border-radius: 32px 0px 0px 32px !important;
+}
+.cardTag {
+  width: 75px;
+  height: 30px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 6px;
+  padding: 0 24px;
+  border-radius: 16px;
+  border: solid 1px #313131;
+  background-color: #fff;
+}
+.Grundriss {
+  width: 120px;
+  height: 30px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+.Frame-136 {
+  height: 119px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  border-radius: 16px;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+.kontactbutton {
+  width: 180px;
+  height: 43px;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+.kontact-button-text {
+  flex-grow: 0;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #fff;
+}
+.propertyTitle {
+  display: flex;
+  flex-grow: 0;
+  font-size: 24px;
+  font-weight: 580;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: start;
+  color: #313131;
+}
+.firstLabel {
+  width: 100px;
+  height: 25px;
+  gap: 6px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #031012 !important;
+  background-color: var(--main-yellow);
+}
+
+.secondLabel {
+  width: 85px;
+  height: 25px;
+  padding: 0 7px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+  display: flex;
+}
+
+.thirdLabels {
+  width: 110px;
+  padding: 0 7px;
+  height: 25px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+  display: flex;
+}
+
+.fourthLabels {
+  padding: 2px;
+
+  width: 100px;
+  height: 25px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  border: solid 1px #000;
+  background-color: #fff;
+}
+
+.layersVector {
+  width: 15.1px;
+  height: 16px;
+}
+
+.layersText {
+  font-size: 14px;
+  color: #1b1b1b;
+}
+
+.style-img {
+  object-fit: cover;
+  border-radius: 30px !important;
+}
+
+.Vector {
+  width: 12px;
+  height: 16.1px;
+  flex-grow: 0;
+  margin: 0.4px 6px 0.4px 0;
+}
+
+.customButton {
+  width: 262px;
+  height: 43px;
+  color: #000;
+  cursor: pointer;
+  border-color: #161410;
+  background-color: #181716;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+}
+.button_text {
+  font-size: 16px;
+  font-weight: 500;
+  color: #1b1b1b;
+}
+
+.heartVector {
+  width: 23px;
+  height: 26.7px;
+  cursor: pointer;
+}
+
+.heartVector.liked {
+  fill: rgb(255, 255, 255) !important;
+}
+.locationTexts {
+  font-size: 14px;
+  color: #344041;
+  text-align: center;
+}
+
+.arrowVector {
+  width: 23px;
+  height: 23px;
+  flex-grow: 0;
+  object-fit: contain;
+}
+
+.Price {
+  font-size: 26px;
+  font-weight: 500;
+  font-stretch: normal;
+  font-style: normal;
+  line-height: normal;
+  letter-spacing: normal;
+  text-align: center;
+  color: #ffffff;
+}
+
+.details {
+  font-size: 14px;
+  text-align: center;
+  color: #344041;
+}
+.value {
+  font-size: 20px;
+  text-align: center;
+  font-weight: 500;
+}
+
+.class {
+  background-color: #1b1b1b;
+}
+
+.header {
+  height: 64px;
+  justify-content: center;
+}
+
+.rightConer {
+  width: 200px;
+}
+@media all and (min-width: 2560px) {
+  .header {
+    font-size: 38px;
+
+    display: flex;
+  }
+  .cardStyle {
+    gap: 0px;
+    width: 350px;
+    height: 300px;
+    /* margin-left: 250px; */
+  }
+}
+@media (max-width: 1399px) {
+  .header {
+    font-size: 38px;
+    align-self: center;
+    margin-left: 150px;
+  }
+  .cardStyle {
+    gap: 0px;
+    width: 350px;
+    height: 300px;
+  }
+}
+
+@media (max-width: 1199px) {
+  .header {
+    font-size: 38px;
+  }
+  .cardStyle {
+    width: 300px;
+    height: 250px;
+  }
+}
+
+@media (max-width: 575px) {
+  .detail {
+    font-size: 11px;
+    padding: 2px;
+  }
+  .Price {
+    font-size: 19px;
+  }
+  .header {
+    font-size: 28px;
+  }
+  .locationText {
+    font-size: 12px;
+  }
+  .customButton {
+    width: 200px !important;
+  }
+  .button_text {
+    font-size: 13px;
+  }
+}
+
+@media (max-width: 375px) {
+  .labelTopClass {
+    width: 105px !important;
+  }
+  .layersText {
+    font-size: 9px;
+  }
+  .firstLabel {
+    gap: 2px;
+  }
+  .layersVector {
+    width: 9px;
+    height: 10px;
+    gap: 0px;
+  }
+  .cardStyle {
+    width: 320px !important;
+    height: 220px !important;
+  }
+  .header {
+    font-size: 24px;
+  }
+  .detail {
+    font-size: 10px;
+    padding: 2px;
+  }
+  .Price {
+    font-size: 18px;
+  }
+  .locationText {
+    font-size: 10px;
+  }
+  .Vector {
+    width: 8px;
+    height: 16px;
+    margin: 0px 2px 0.4px;
+  }
+}
+
+@media (max-width: 280px) {
+  .cardStyle {
+    width: 260px !important;
+    height: 160px !important;
+  }
+  .detail {
+    margin-bottom: 5px;
+    font-size: 0.6ch;
+  }
+  .Price {
+    font-size: 9px;
+  }
+  .locationText {
+    font-size: 6px;
+  }
+  .Vector {
+    width: 7px;
+    height: 10px;
+    margin: 0px 2px 4px;
+  }
+  .heartVector {
+    width: 15px;
+    height: 20px;
+  }
+}