refactor: Use css variables for breakpoint value
diff --git a/erpnext/public/scss/shopping_cart.scss b/erpnext/public/scss/shopping_cart.scss
index 92e5d32..9402cf9 100644
--- a/erpnext/public/scss/shopping_cart.scss
+++ b/erpnext/public/scss/shopping_cart.scss
@@ -73,15 +73,6 @@
 		}
 	}
 
-	// .card-body {
-	// 	text-align: center;
-	// }
-
-	// .featured-item {
-	// 	.card-body {
-	// 		text-align: left;
-	// 	}
-	// }
 	.card-img-container {
 		height: 210px;
 		width: 100%;
@@ -216,12 +207,12 @@
 		border-color: var(--table-border-color) !important;
 		padding: 15px;
 
-		@media (max-width: 840px) {
+		@media (max-width: var(--md-width)) {
 			height: 300px;
 			width: 300px;
 		}
 
-		@media (min-width: 1090px) {
+		@media (min-width: var(--lg-width)) {
 			height: 350px;
 			width: 350px;
 		}
@@ -233,11 +224,11 @@
 
 	.item-slideshow {
 
-		@media (max-width: 840px) {
+		@media (max-width: var(--md-width)) {
 			max-height: 320px;
 		}
 
-		@media (min-width: 1090px) {
+		@media (min-width: var(--lg-width)) {
 			max-height: 430px;
 		}
 
@@ -316,9 +307,6 @@
 }
 
 .item-group-slideshow {
-	// .item-group-description {
-		// max-width: 900px;
-	// }
 
 	.carousel-inner.rounded-carousel {
 		border-radius: var(--card-border-radius);