moved away from scss variables and standardised the styles code

src/app/home/home.page.html

@@ -1,6 +1,6 @@
 <ion-content [fullscreen]="true">
   <h5> Namaskaram! </h5>
-  <ul class="stories" (click)="showStoryDetails()">
+  <ul class="stories remove-scrollbar" (click)="showStoryDetails()">
     <li>
       <img src="assets/sample-images/golden-temple-icon.webp" alt="golden-temple-icon">
     </li>
@@ -70,7 +70,7 @@
       <h5> Trending Collections </h5>
       <a href="#"> See All </a>
     </header>
-    <ul class="horizontal-card-list">
+    <ul class="horizontal-card-list remove-scrollbar">
       <li>
         <figure>
           <img src="assets/sample-images/merch/idol.webp" alt="">

src/app/home/home.page.scss

@@ -1,16 +1,3 @@
-// light 300; semi-regular 400; regular 500; semi-bold 600; bold 700;
-
-$standard-vertical-spacing-between-sections: 1.5rem;
-$stories-height: 6rem;
-$card-radius: 1rem;
-
-@mixin removeScrollbar {
-  &::-webkit-scrollbar {
-    width: 0px;
-    height: 0px;
-  }
-}
-
 ion-content {
   --background: var(--brand-cream-shade1);
 }
@@ -18,7 +5,7 @@ ion-content {
 h5 {
   font-weight: 600;
   font-size: 1.6rem;
-  margin: 0 0 $standard-vertical-spacing-between-sections 0;
+  margin: 0 0 var(--standard-vertical-spacing-between-sections) 0;
 }
 
 .stories {
@@ -26,10 +13,9 @@ h5 {
   width: calc(100% + 2rem);
   overflow-x: auto;
   overflow-y: hidden;
-  height: $stories-height;
+  height: var(--stories-height);
   white-space: nowrap;
-  margin: $standard-vertical-spacing-between-sections 0;
-  @include removeScrollbar;
+  margin: var(--standard-vertical-spacing-between-sections) 0;
 
   li {
     display: inline-block;
@@ -38,8 +24,8 @@ h5 {
 
     img {
       border: 0.2rem solid var(--brand-red);
-      width: $stories-height;
-      height: $stories-height;
+      width: var(--stories-height);
+      height: var(--stories-height);
       border-radius: 50%;
       overflow: hidden;
       object-fit: cover;
@@ -50,10 +36,10 @@ h5 {
 }
 
 .card {
-  border-radius: $card-radius;
+  border-radius: var(--card-radius);
   overflow: hidden;
   background-color: white;
-  margin: $standard-vertical-spacing-between-sections 0;
+  margin: var(--standard-vertical-spacing-between-sections) 0;
 
   h5, p {
     margin-bottom: 1rem;
@@ -81,7 +67,7 @@ h5 {
 }
 
 .action-card {
-  padding: $standard-vertical-spacing-between-sections;
+  padding: var(--standard-vertical-spacing-between-sections);
   display: grid;
   grid-template-columns: 0.6fr 0.4fr;
   background-image: url('../../assets/sample-images/pattern.png');
@@ -121,7 +107,7 @@ h5 {
       height: 100%;
       object-fit: cover;
       object-position: top;
-      border-radius: $card-radius;
+      border-radius: var(--card-radius);
     }
   }
 
@@ -162,10 +148,9 @@ header {
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  padding: $standard-vertical-spacing-between-sections;
-  margin: $standard-vertical-spacing-between-sections 0;
-  margin-left: -$standard-vertical-spacing-between-sections;
-  @include removeScrollbar;
+  padding: var(--standard-vertical-spacing-between-sections);
+  margin: var(--standard-vertical-spacing-between-sections) 0;
+  margin-left: -var(--standard-vertical-spacing-between-sections);
 
   li {
     display: inline-block;
@@ -181,7 +166,7 @@ header {
       top: -1rem;
       background-color: var(--brand-red);
       opacity: 0.1;
-      border-radius: $card-radius;
+      border-radius: var(--card-radius);
     }
 
     &::after {
@@ -193,7 +178,7 @@ header {
       top: 0rem;
       background-color: var(--brand-red);
       opacity: 0.2;
-      border-radius: $card-radius;
+      border-radius: var(--card-radius);
       z-index: 1;
     }
   }
@@ -205,7 +190,7 @@ header {
     height: 20rem;
 
     img {
-      border-radius: $card-radius;
+      border-radius: var(--card-radius);
       width: 100%;
       height: 100%;
       object-fit: cover;

src/app/story-details/story-details.page.scss

@@ -5,9 +5,6 @@ ion-content {
   --padding-bottom: 0rem;
 }
 
-$standard-vertical-spacing-between-sections: 1.5rem;
-
-
 figure {
   height: 60vh;
   img {
@@ -30,7 +27,7 @@ figure {
 h5 {
   font-weight: 700;
   font-size: 2rem;
-  margin-bottom: $standard-vertical-spacing-between-sections;
+  margin-bottom: var(--standard-vertical-spacing-between-sections);
 }
 
 p {

src/global.scss

@@ -57,4 +57,11 @@ ion-content {
 
 :root {
   font-size: 62.5%;
+}
+
+.remove-scrollbar {
+  &::-webkit-scrollbar {
+    width: 0px;
+    height: 0px;
+  }
 }

src/theme/variables.scss

@@ -82,6 +82,10 @@
   --brand-orange-shade2: #fa9900;
   --brand-cream-shade1: #fde6c8;
   --brand-cream-shade2: #fce09f;
+
+  --standard-vertical-spacing-between-sections: 1.5rem;
+  --stories-height: 6rem;
+  --card-radius: 1rem;
 }
 
 // @media (prefers-color-scheme: dark) {