working on addition of components

styles/_cards.scss

@@ -0,0 +1,38 @@
+.card {
+  background-color: transparent;
+}
+
+.card-wrapper {
+  width: 100%;
+}
+.card-b {
+  padding: 2rem;
+  background: rgba(34, 37, 43, 0.5);
+  backdrop-filter: blur(3px);
+  border-radius: 8px;
+  opacity: 1;
+  transition: all 0.35s ease-in-out;
+  @include media-breakpoint-down(sm) {
+    margin: 10px;
+  }
+  &.not-hover {
+    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;
+  }
+  .card-deck .card {
+    margin-bottom: 2.5rem !important;
+  }
+}

styles/_content.scss

@@ -88,47 +88,6 @@ a.card,
   padding-left: 20px;
 }
 
-
-/* Cards ------------------------------- */
-.card {
-  background-color: transparent;
-}
-
-.card-wrapper {
-  width: 100%;
-}
-.card-b {
-  padding: 2rem;
-  background: rgba(34, 37, 43, 0.5);
-  backdrop-filter: blur(3px);
-  border-radius: 8px;
-  opacity: 1;
-  transition: all 0.35s ease-in-out;
-  @include media-breakpoint-down(sm) {
-    margin: 10px;
-  }
-  &.not-hover {
-    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;
-  }
-  .card-deck .card {
-    margin-bottom: 2.5rem !important;
-  }
-}
-
 // Hover anchors ---------------
 .hover_anchor {
   visibility: hidden;

styles/_font.scss

@@ -5,10 +5,10 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   font-size: $base-size;
-  background: #000;
-  background-color: #000;
+  background: $gray-900;
+  background-color: $gray-900;
   line-height: 1.5;
-  color: #FFF;
+  color: $white;
   font-family: 'Work Sans', sans-serif;
 }
 
@@ -23,19 +23,73 @@ h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-weight: bold;
 }
+// h1, .h1 {
+//   font-size: 2.625rem;
+// }
+// h6, .h6 {
+//   font-size: 1.125rem;
+// }
+// .h6 {
+//   font-size: 1.125rem !important;
+// }
+// p {
+//   line-height: 1.5;
+// }
 h1, .h1 {
-  font-size: 2.625rem;
+  font-size: 3.875rem;
+  line-height: 70px;
+  @media (max-width: 480px) {
+    font-size: 2.625rem;
+    line-height: 48px;
+  }
+}
+h2, .h2 {
+  font-size: 3.5rem;
+  line-height: 62px;
+  @include media-breakpoint-down(sm) {
+    font-size: 1.75rem;
+    line-height: 34px;
+  }
+}
+h3, .h3 {
+  font-size: 3.5rem;
+  line-height: 52px;
+  @include media-breakpoint-down(sm) {
+    font-size: 1.25rem;
+    line-height: 28px;
+  }
+}
+h4, .h4 {
+  font-size: 2rem;
+  line-height: 38px;
+  @include media-breakpoint-down(sm) {
+    font-size: 1.125rem;
+    line-height: 26px;
+  }
+}
+h5, .h5 {
+  font-size: 1.5rem;
+  line-height: 32px;
+  @include media-breakpoint-down(sm) {
+    font-size: 1.125rem;
+    line-height: 26px;
+  }
 }
 h6, .h6 {
-  font-size: 1.125rem;
+  font-size: 1.25rem;
+  line-height: 26px;
+  @include media-breakpoint-down(sm) {
+    font-size: 1rem;
+    line-height: 24px;
+  }
 }
-.h6 {
-  font-size: 1.125rem !important;
+p {
+  font-size: 1rem;
+  line-height: 24px;
 }
 
-p {
-  line-height: 1.5;
-}
+
+
 a {
   // text-decoration: underline;
   color: inherit;

styles/xrpl.scss

@@ -34,6 +34,7 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
 @import "_helpers.scss";
 @import "_buttons.scss";
 @import "_tables.scss";
+@import "_tables.scss";
 @import "_use-cases.scss";
 @import "_github-edit.scss";
 @import "_top-nav.scss";

template/page-xrpl-overview.html.jinja

@@ -19,7 +19,7 @@
 <div id="page-overview-bg" class="pt-40-until-sm">
   <div class="container">
       <section class="row mt-20 mb-50-until-sm mb-20">
-        <div class="col-md-6 mb-10">
+        <div class="col-md-6 mb-10 offset-md-3 text-center">
           <h6 class="text-primary mb-4">{% trans %}XRP Overview{% endtrans %}</h6>
           <h1 class="mb-18">{% trans %}Your Questions About XRP, Answered.{% endtrans %}</h1>
         </div>