adding cta bgs

styles/_cards.scss

@@ -19,15 +19,8 @@
     opacity: 0.6;
   }
 }
-// .section-marker {
-//   position: absolute;
-//   font-size: 0.875rem;
-//   transform: rotate(90deg);
-//   font-weight: normal;
-//   top: calc(50% - 64px);
-//   margin-left: -32px;
-//   transform-origin: top left;
-// }
+
+
 @include media-breakpoint-down(md) {
   .card-deck {
     display: block !important;

styles/_chips.scss

@@ -4,6 +4,9 @@
 	font-weight: bold;
 	padding: 0.5rem 1rem;
 	border-radius: 100px;
+	&::before {
+		content: none !important;
+	}
 	&-red-purple {
 		color: $red-purple-300;
 		background-color: $red-purple-900;
@@ -32,4 +35,7 @@
 		color: $yellow-300;
 		background-color: $yellow-900;
 	}
+	&::after {
+		
+	}
 }

styles/_helpers.scss

@@ -405,4 +405,6 @@ br {
     content: '';
   }
 }
-
+.z-index-1 {
+  z-index: 1;
+}

styles/_layout.scss

@@ -63,6 +63,7 @@ section {
   display: grid;
   gap: 1px;
   padding: 0;
+  width: 100%;
 
   &.card-grid-2x2 {
     /* left half is a hero area; right half is a 2x2 grid. */
@@ -302,7 +303,45 @@ $columns: 12; // Number of columns in the grid system
     &#blue-light-blue {
       background-image: url(../../img/cards/blue-light-blue.svg);
     }
-    
+    &#sm-yellow {
+      background-image: url(../../img/cards/sm-yellow.svg);
+    }
+    &#sm-yellow-2 {
+      background-image: url(../../img/cards/sm-yellow-2.svg);
+    }
+    &#sm-purple {
+      background-image: url(../../img/cards/sm-purple.svg);
+    }
+    &#sm-magenta {
+      background-image: url(../../img/cards/sm-magenta.svg);
+    }
+    &#sm-blue-green {
+      background-image: url(../../img/cards/sm-blue-green.svg);
+    }
+    &#sm-green {
+      background-image: url(../../img/cards/sm-green.svg);
+    }
+    &#sm-green-2 {
+      background-image: url(../../img/cards/sm-green-2.svg);
+    }
+    &#sm-light-blue {
+      background-image: url(../../img/cards/sm-light-blue.svg);
+    }
+    &#sm-light-blue-3 {
+      background-image: url(../../img/cards/sm-light-blue-3.svg);
+    }
+    &#sm-magenta-2 {
+      background-image: url(../../img/cards/sm-magenta-2.svg);
+    }
+    &#sm-magenta-3 {
+      background-image: url(../../img/cards/sm-magenta-3.svg);
+    }
+    &#sm-orange {
+      background-image: url(../../img/cards/sm-orange.svg);
+    }
+    &#sm-orange-2 {
+      background-image: url(../../img/cards/sm-orange-2.svg);
+    }
   }
 
   .card-new {

styles/_pages.scss

@@ -29,6 +29,18 @@
   }
 }
 
+.cta {
+  position: absolute;
+  &-top-left {
+    top: 0;
+    left: 0;
+  }
+  &-bottom-right {
+    bottom: 0;
+    right: 0;
+  }
+}
+
 // XRP Overview Page
 #xrp-overview-blue {
   position: absolute;
@@ -123,6 +135,18 @@
   right: -4px;
 }
 
+// Community Page
+#community-magenta {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+#community-purple {
+  position: absolute;
+  top: 160px;
+  right: 0px;
+}
+
 
 // FAQ Page
 #faq-background {

styles/_tables.scss

@@ -87,24 +87,18 @@ td:nth-child(1) {
     }
   }
   tbody td {
-    padding: 2.5rem 0;
+    padding: 2rem 0;
   }
   tbody tr {
     border-bottom: 1px solid $gray-600;
   }
-  td:first-child{
-    width: 40%;
-  }
   .ratio {
     font-size: 1rem;
     display: block;
-    margin-top: 4px;
+    margin-top: -8px;
     color: $gray-500;
   }
   @include media-breakpoint-down(md) {
-    .ratio {
-      display: block;
-    }
     table {
       font-size: 0.875rem;
     }