Use css variables for banner heights

styles/components/_global_layout.scss

@@ -25,12 +25,12 @@ body {
     margin: $gap;
     flex-grow: 1;
     -ms-flex-negative: 1;
-    top: 68px;
+    top: $usa-banner-height + $topbar-height;
     position: relative;
 
     @include media($medium-screen) {
       margin: $gap * 2;
-      top: 68px;
+      top: $usa-banner-height + $topbar-height;
     }
   }
 }

styles/components/_sticky_cta.scss

@@ -10,6 +10,7 @@
 
   &.js-is-sticky {
     width: calc(100% - 25rem);
+    top: $usa-banner-height + $topbar-height;
   }
 
   .sticky-cta-container {

styles/components/_topbar.scss

@@ -1,9 +1,9 @@
 .topbar {
   background-color: $color-blue-darkest;
   border-bottom: 1px solid $color-black;
-  height: 48px;
+  height: $topbar-height;
   position: fixed;
-  top: 28px;
+  top: $usa-banner-height;
   width: 100%;
   z-index: 10;
 

styles/components/_usa_banner.scss

@@ -4,7 +4,7 @@
   padding: ($gap / 2) $gap;
   z-index: 15;
   position: fixed;
-  height: 28px;
+  height: $usa-banner-height;
   width: 100%;
 
   img {