ready list plus minus

public/css/styles.css

@@ -306,6 +306,80 @@ h1, h2, h3, h4, h5, h6 {
   }
 }
 
+.plus-minus {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  background: var(--body-bg-color);
+  gap: 20px;
+  margin: 0 0 20px 0;
+  border-radius: 12px;
+  padding: 20px;
+}
+@media (max-width: 768px) {
+  .plus-minus {
+    grid-template-columns: 1fr;
+    gap: 12px;
+    padding: 16px 12px;
+  }
+}
+.plus-minus__column {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  background: #fff;
+  border-radius: 8px;
+  font-size: 16px;
+  padding: 20px;
+}
+@media (max-width: 768px) {
+  .plus-minus__column {
+    padding: 16px;
+  }
+}
+.plus-minus__column:first-child .plus-minus__item:before {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  background: url("../images/icon-property-on.svg") no-repeat center center;
+}
+.plus-minus__column:last-child .plus-minus__item:before {
+  content: "";
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translate(0, -50%);
+  background: url("../images/icon-property-off.svg") no-repeat center center;
+}
+.plus-minus__item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding-left: 40px;
+  position: relative;
+}
+@media (max-width: 768px) {
+  .plus-minus__item {
+    gap: 12px;
+  }
+}
+.plus-minus__item .icon {
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .plus-minus__item .icon {
+    width: 20px;
+    height: 20px;
+  }
+}
+
 .header {
   position: fixed;
   width: 100%;

public/images/icon-property-off.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24"   xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12" fill="#F5294D" />
+<rect id="Rectangle 21" x="5.25" y="10.8003" width="13.5" height="2.4" rx="1.2" fill="white"/>
+</svg>

public/images/icon-property-on.svg

@@ -0,0 +1,4 @@
+<svg  viewBox="0 0 24 24"   xmlns="http://www.w3.org/2000/svg">
+<rect width="24" height="24" rx="12"  fill="#42C22D"/>
+<path id="Vector (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M17.1556 8.29289C17.5487 8.68342 17.5487 9.31658 17.1556 9.70711L10.6955 16.1238C10.3024 16.5143 9.66494 16.5143 9.27177 16.1238L6.3354 13.2071C5.94224 12.8166 5.94224 12.1834 6.3354 11.7929C6.72856 11.4024 7.36601 11.4024 7.75917 11.7929L9.98366 14.0025L15.7318 8.29289C16.125 7.90237 16.7624 7.90237 17.1556 8.29289Z" fill="white"/>
+</svg>

resources/sass/base/_typography.scss

@@ -253,5 +253,79 @@ table{
 		 }
 	 }
  }
+}
+
 
-}
+.plus-minus{
+	display:grid;
+	grid-template-columns: 1fr 1fr;
+	background: var(--body-bg-color);
+	gap: 20px;
+	margin: 0 0  20px 0;
+	border-radius: 12px;
+	padding: 20px;
+	@include mobile{
+		grid-template-columns: 1fr;
+		gap: 12px;
+		padding: 16px 12px;
+	}
+	&__column{
+		display: flex;
+		flex-direction: column;
+		gap:16px;
+		background: #fff;
+		border-radius: 8px;
+		font-size: 16px;
+		padding: 20px;
+		@include mobile{
+			padding: 16px;
+		}
+		&:first-child{
+			.plus-minus__item{
+					&:before{
+						content:'';
+						display:block;
+						width:24px;
+						height:24px;
+						position:absolute;
+						top:50%;
+						left:0;
+						transform: translate(0, -50%);
+						background:url('../images/icon-property-on.svg') no-repeat center center;
+					}
+			}
+		}
+		&:last-child{
+				.plus-minus__item{
+					&:before{
+						content:'';
+						display:block;
+						width:24px;
+						height:24px;
+						position:absolute; 
+						top:50%;
+						left:0;
+						transform: translate(0, -50%);
+						background:url('../images/icon-property-off.svg') no-repeat center center;
+					}
+			  }
+		}
+	}
+	&__item{
+		display: flex;
+		align-items: center;
+		gap: 16px;
+		padding-left:40px;
+		position:relative;
+		@include mobile{
+			gap: 12px;
+		}
+		.icon{
+			flex-shrink: 0;
+			@include mobile{
+				width: 20px;
+				height: 20px;
+			}
+		}
+	}
+}