first pass usecases update. desktop.

styles/_pages.scss

@@ -157,9 +157,9 @@
 }
 
 #use-case-card-grid {
-  @include media-breakpoint-up(lg) {
-    margin-top: -40px; // offset the 40px margin of the cols
-  }
+  // @include media-breakpoint-up(lg) {
+  //   margin-top: -40px; // offset the 40px margin of the cols
+  // }
 }
 
 #validator-graphic {
@@ -168,13 +168,35 @@
 
 .page-uses {
   &::before {
+    transform: scaleX(-1);
     background-image: url(../img/backgrounds/use-cases-blue.svg);
   }
-  @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
-    ##{$usecase} {
-      content: url("../img/icons/#{$usecase}.svg");
-    }
+
+@each $usecase in "infrastructure",
+"developer_tooling",
+"interoperability",
+"wallet",
+"nfts",
+"exchanges",
+"gaming",
+"security",
+"payments",
+"web_monetization",
+"sustainability",
+"cbdc",
+"custody",
+"defi" {
+  ##{$usecase} {
+    max-height: 48px;
+    content: url("../img/icons/usecases/ic_#{$usecase}.png");
   }
+}
+
+  // @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
+  //   ##{$usecase} {
+  //     content: url("../img/icons/#{$usecase}.svg");
+  //   }
+  // }
 
   @each $company,$card-graphic in (
     "bitgo": "magenta-3",

styles/_status-labels.scss

@@ -336,6 +336,8 @@
   &.label-payment-channels,
   &.label-アカウント,
   &.label-payment-channel,
+  &.label-use-infrastructure,
+  &.label-use-security,
   &.chip-indigo {
     @include chip-indigo;
   }
@@ -344,6 +346,7 @@
   &.label-xrp,
   &.label-ブロックチェーン,
   &.label-non-fungible-tokens-nfts,
+  &.label-use-nfts,
   &.chip-green {
     @include chip-green;
   }
@@ -351,6 +354,8 @@
   &.label-checks,
   &.label-core-server,
   &.label-コアサーバー,
+  &.label-use-interoperability,
+  &.label-use-web_monetization,
   &.chip-purple  {
     @include chip-purple;
   }
@@ -359,6 +364,8 @@
   &.label-security,
   &.label-複数通貨間,
   &.label-セキュリティ,
+  &.label-use-gaming,
+  &.label-use-defi,
   &.chip-yellow {
     @include chip-yellow;
   }
@@ -369,6 +376,8 @@
   &.label-分散型取引所,
   &.label-スマートコントラクト,
   &.label-トランザクション送信,
+  &.label-use-developer_tooling,
+  &.label-use-payments,
   &.chip-blue {
     @include chip-blue;
   }
@@ -378,6 +387,8 @@
   &.label-development,
   &.label-トークン,
   &.label-開発,
+  &.label-use-wallet,
+  &.label-use-sustainability,
   &.chip-orange {
     @include chip-orange;
   }
@@ -388,6 +399,8 @@
   &.label-手数料,
   &.label-支払い,
   &.label-データ保持,
+  &.label-use-exchanges,
+  &.label-use-custody,
   &.chip-magenta {
     @include chip-magenta;
   }