diff --git a/app/components/SideBar/Logo/Logo.module.css b/app/components/SideBar/Logo/Logo.module.css
index 6a5ff32474..a5d90aeabd 100644
--- a/app/components/SideBar/Logo/Logo.module.css
+++ b/app/components/SideBar/Logo/Logo.module.css
@@ -84,7 +84,7 @@
   opacity: 0.7;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .logo {
     flex-direction: row-reverse;
   }
diff --git a/app/components/SideBar/MenuBottom/MenuBottom.module.css b/app/components/SideBar/MenuBottom/MenuBottom.module.css
index ec9d05d46e..adc9db7c79 100644
--- a/app/components/SideBar/MenuBottom/MenuBottom.module.css
+++ b/app/components/SideBar/MenuBottom/MenuBottom.module.css
@@ -133,7 +133,7 @@
   animation: spin 1s linear infinite;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .latestBlock .tooltipContainer span {
     visibility: hidden;
   }
diff --git a/app/components/SideBar/MenuLinks/MenuLinks.module.css b/app/components/SideBar/MenuLinks/MenuLinks.module.css
index 1a823adefa..c6e532afad 100644
--- a/app/components/SideBar/MenuLinks/MenuLinks.module.css
+++ b/app/components/SideBar/MenuLinks/MenuLinks.module.css
@@ -97,7 +97,7 @@
   color: var(--text-color) !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabs {
     margin: 0 auto;
   }
diff --git a/app/components/SideBar/SideBar.module.css b/app/components/SideBar/SideBar.module.css
index 6889816b85..94bea76db9 100644
--- a/app/components/SideBar/SideBar.module.css
+++ b/app/components/SideBar/SideBar.module.css
@@ -45,7 +45,7 @@
   margin-bottom: 10px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .sidebar {
     display: flex;
     width: 100% !important;
diff --git a/app/components/buttons/HelpLink/HelpLink.module.css b/app/components/buttons/HelpLink/HelpLink.module.css
index 7bc881b5b0..5a68f66580 100644
--- a/app/components/buttons/HelpLink/HelpLink.module.css
+++ b/app/components/buttons/HelpLink/HelpLink.module.css
@@ -93,14 +93,14 @@
   background-image: var(--help-forum);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .icon {
     margin-right: 10px;
     margin-bottom: 10px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .icon {
     margin-right: 0;
     width: 355px;
diff --git a/app/components/charts/Charts.module.css b/app/components/charts/Charts.module.css
index 885546b276..1b9f12a12c 100644
--- a/app/components/charts/Charts.module.css
+++ b/app/components/charts/Charts.module.css
@@ -90,12 +90,12 @@
 .recharts-tooltip-cursor {
   fill: var(--chart-cursor-color);
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .meteredTicksArea {
     margin-left: 60px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .meteredChartLegend {
     margin: 0;
   }
diff --git a/app/components/indicators/LinearProgress/LinearProgress.module.css b/app/components/indicators/LinearProgress/LinearProgress.module.css
index 0570e80301..8ac76f32b2 100644
--- a/app/components/indicators/LinearProgress/LinearProgress.module.css
+++ b/app/components/indicators/LinearProgress/LinearProgress.module.css
@@ -106,7 +106,7 @@
 .lastLogLines {
   font-size: 9px;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .loaderBarEstimation {
     display: none;
   }
diff --git a/app/components/indicators/LoaderBarBottom/LoaderBarBottom.module.css b/app/components/indicators/LoaderBarBottom/LoaderBarBottom.module.css
index 4d307e6c0a..4a7c1d8804 100644
--- a/app/components/indicators/LoaderBarBottom/LoaderBarBottom.module.css
+++ b/app/components/indicators/LoaderBarBottom/LoaderBarBottom.module.css
@@ -16,7 +16,7 @@
   font-weight: 700;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .barEstimation {
     display: none;
   }
diff --git a/app/components/indicators/NoMoreIndicators/NoMoreIndicators.module.css b/app/components/indicators/NoMoreIndicators/NoMoreIndicators.module.css
index 34c9c881df..97ca1a58b9 100644
--- a/app/components/indicators/NoMoreIndicators/NoMoreIndicators.module.css
+++ b/app/components/indicators/NoMoreIndicators/NoMoreIndicators.module.css
@@ -44,12 +44,12 @@
   background-color: var(--background-back-color);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .noProposals {
     margin-left: 40px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .noMoreTicketsIndicator {
     width: 315px;
   }
diff --git a/app/components/indicators/VotingProgress/VotingProgress.module.css b/app/components/indicators/VotingProgress/VotingProgress.module.css
index 5eac639fe7..3a419c058a 100644
--- a/app/components/indicators/VotingProgress/VotingProgress.module.css
+++ b/app/components/indicators/VotingProgress/VotingProgress.module.css
@@ -15,12 +15,12 @@
   background-color: var(--vote-no-color);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .votingProgressIndicator {
     width: 120px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .votingProgressIndicator {
     width: 120px;
   }
diff --git a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
index 7b03231bc8..611f4b0ee8 100644
--- a/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
+++ b/app/components/inputs/DetailedAccountsSelect/DetailedAccountsSelect.module.css
@@ -62,7 +62,7 @@
   color: var(--main-dark-blue);
   font-size: 13px;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .value {
     max-width: 235px;
   }
diff --git a/app/components/layout/DescriptionHeader/DescriptionHeader.module.css b/app/components/layout/DescriptionHeader/DescriptionHeader.module.css
index 1c44da8d47..062faa2ad7 100644
--- a/app/components/layout/DescriptionHeader/DescriptionHeader.module.css
+++ b/app/components/layout/DescriptionHeader/DescriptionHeader.module.css
@@ -17,7 +17,7 @@
 .actionButton > .button {
   min-width: 76px;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .header {
     display: none;
   }
diff --git a/app/components/layout/PageBody/PageBody.module.css b/app/components/layout/PageBody/PageBody.module.css
index e34ac9404e..62812c4d29 100644
--- a/app/components/layout/PageBody/PageBody.module.css
+++ b/app/components/layout/PageBody/PageBody.module.css
@@ -37,7 +37,7 @@
   left: 0;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .pageBody {
     flex-direction: column-reverse;
   }
diff --git a/app/components/layout/StandaloneHeader/StandaloneHeader.module.css b/app/components/layout/StandaloneHeader/StandaloneHeader.module.css
index 66a0487ee3..ba3c36690e 100644
--- a/app/components/layout/StandaloneHeader/StandaloneHeader.module.css
+++ b/app/components/layout/StandaloneHeader/StandaloneHeader.module.css
@@ -3,13 +3,13 @@
   padding: 40px 60px 25px 60px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .header {
     padding-left: 20px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .header {
     height: initial;
     display: flex;
diff --git a/app/components/layout/StandalonePageBody/StandalonePageBody.module.css b/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
index a3e651ebb7..8993a9d518 100644
--- a/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
+++ b/app/components/layout/StandalonePageBody/StandalonePageBody.module.css
@@ -6,7 +6,7 @@
   height: 100%;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .body {
     padding-left: 20px;
     padding-right: 20px;
diff --git a/app/components/layout/TabbedPage/TabbedPage.module.css b/app/components/layout/TabbedPage/TabbedPage.module.css
index ea9a5f7777..9ab3ed169e 100644
--- a/app/components/layout/TabbedPage/TabbedPage.module.css
+++ b/app/components/layout/TabbedPage/TabbedPage.module.css
@@ -43,7 +43,7 @@
   padding: 30px 80px 30px 60px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .tabbedPageHeader {
     padding-left: 20px;
   }
@@ -56,7 +56,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabbedPageHeader {
     padding-top: 30px;
   }
diff --git a/app/components/layout/TitleHeader/TitleHeader.module.css b/app/components/layout/TitleHeader/TitleHeader.module.css
index 044158f784..cc2777fa90 100644
--- a/app/components/layout/TitleHeader/TitleHeader.module.css
+++ b/app/components/layout/TitleHeader/TitleHeader.module.css
@@ -89,13 +89,13 @@
   margin-left: auto;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .container {
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 345px;
   }
diff --git a/app/components/modals/AboutModal/AboutModal.module.css b/app/components/modals/AboutModal/AboutModal.module.css
index 472533ddf3..38ccc778b8 100644
--- a/app/components/modals/AboutModal/AboutModal.module.css
+++ b/app/components/modals/AboutModal/AboutModal.module.css
@@ -85,13 +85,13 @@
   color: var(--input-color-hover);
 }
 
-@media screen and (max-width: 1000px) {
+@media (--md-viewport) {
   .about {
     width: inherit;
   }
 }
 
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .about {
     width: 455px !important;
     height: 290px;
diff --git a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
index a12dfbb799..7222bc4d97 100644
--- a/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
+++ b/app/components/modals/AutoBuyerSettingsModal/AutoBuyerSettingsModal.module.css
@@ -49,13 +49,13 @@
 .maxFeePercentage input {
   font-size: 16px;
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .modal {
     width: 421px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 355px;
   }
diff --git a/app/components/modals/DiscoverUsageModal/DiscoverUsageModal.module.css b/app/components/modals/DiscoverUsageModal/DiscoverUsageModal.module.css
index 290c6744e6..dde612f33d 100644
--- a/app/components/modals/DiscoverUsageModal/DiscoverUsageModal.module.css
+++ b/app/components/modals/DiscoverUsageModal/DiscoverUsageModal.module.css
@@ -56,13 +56,13 @@
   font-size: 16px;
 }
 
-@media screen and (max-width: 1179px) {
+@media (--bg-viewport) {
   .modal {
     width: 421px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 355px;
   }
diff --git a/app/components/modals/DocumentationInfoModal/DocumentationInfoModal.module.css b/app/components/modals/DocumentationInfoModal/DocumentationInfoModal.module.css
index e8c07a2f9a..5c07123504 100644
--- a/app/components/modals/DocumentationInfoModal/DocumentationInfoModal.module.css
+++ b/app/components/modals/DocumentationInfoModal/DocumentationInfoModal.module.css
@@ -2,7 +2,7 @@
   margin-bottom: 20px;
 }
 
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .infoDocumentation:not(.constitution) {
     column-count: 1;
   }
diff --git a/app/components/modals/InfoModal/InfoModal.module.css b/app/components/modals/InfoModal/InfoModal.module.css
index 97fca11af8..bed6da45c7 100644
--- a/app/components/modals/InfoModal/InfoModal.module.css
+++ b/app/components/modals/InfoModal/InfoModal.module.css
@@ -88,13 +88,13 @@
   height: 40px;
   align-self: flex-end;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .info,
   .info.double {
     width: 400px !important;
   }
 }
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .info,
   .info.double {
     width: 300px !important;
diff --git a/app/components/modals/LNChannelModal/LNChannelModal.module.css b/app/components/modals/LNChannelModal/LNChannelModal.module.css
index 74214fb1ae..126bea8758 100644
--- a/app/components/modals/LNChannelModal/LNChannelModal.module.css
+++ b/app/components/modals/LNChannelModal/LNChannelModal.module.css
@@ -31,7 +31,7 @@
   margin-top: 30px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 355px;
     padding: 30px 20px;
diff --git a/app/components/modals/LNInvoiceModal/LNInvoiceModal.module.css b/app/components/modals/LNInvoiceModal/LNInvoiceModal.module.css
index 108cd24b33..2126df4e70 100644
--- a/app/components/modals/LNInvoiceModal/LNInvoiceModal.module.css
+++ b/app/components/modals/LNInvoiceModal/LNInvoiceModal.module.css
@@ -85,7 +85,7 @@
   margin: 20px 0 0 0;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 355px;
     padding: 30px 20px;
diff --git a/app/components/modals/LNPaymentModal/LNPaymentModal.module.css b/app/components/modals/LNPaymentModal/LNPaymentModal.module.css
index c4baeada9f..d2b9e6cf86 100644
--- a/app/components/modals/LNPaymentModal/LNPaymentModal.module.css
+++ b/app/components/modals/LNPaymentModal/LNPaymentModal.module.css
@@ -67,7 +67,7 @@
   margin: 20px 0 0 0;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 355px;
     padding: 30px 20px;
diff --git a/app/components/modals/MixerSettingsModal/MixerSettingsModal.module.css b/app/components/modals/MixerSettingsModal/MixerSettingsModal.module.css
index ff5591ec4b..4d362072a5 100644
--- a/app/components/modals/MixerSettingsModal/MixerSettingsModal.module.css
+++ b/app/components/modals/MixerSettingsModal/MixerSettingsModal.module.css
@@ -32,12 +32,12 @@
   float: right;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .mixerSettings {
     width: 594px !important;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .mixerSettings {
     width: 305px;
     min-width: unset;
diff --git a/app/components/modals/Modal/Modal.module.css b/app/components/modals/Modal/Modal.module.css
index dde6579b9d..b2b9e030e5 100644
--- a/app/components/modals/Modal/Modal.module.css
+++ b/app/components/modals/Modal/Modal.module.css
@@ -60,7 +60,7 @@
   text-align: left;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overlayReducedBar {
     left: 0;
     bottom: 70px;
diff --git a/app/components/modals/PassphraseModal/PassphraseModal.module.css b/app/components/modals/PassphraseModal/PassphraseModal.module.css
index ccff8707f4..529ccbaaeb 100644
--- a/app/components/modals/PassphraseModal/PassphraseModal.module.css
+++ b/app/components/modals/PassphraseModal/PassphraseModal.module.css
@@ -54,7 +54,7 @@
 .closeButtonTop:hover {
   opacity: 0.7;
 }
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .passphrase {
     max-height: 60%;
   }
diff --git a/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModal.module.css b/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModal.module.css
index efbc8125b8..552cc22cda 100644
--- a/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModal.module.css
+++ b/app/components/modals/SeedCopyConfirmModal/SeedCopyConfirmModal.module.css
@@ -57,12 +57,12 @@
   margin: 0px 4px 0px 4px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .warningText {
     column-count: 1;
   }
 }
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .confirmSeedCopy {
     max-height: 60%;
   }
diff --git a/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountModal.module.css b/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountModal.module.css
index aafdd66f63..23b39be5e1 100644
--- a/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountModal.module.css
+++ b/app/components/modals/SendFromUnmixedAccountModal/SendFromUnmixedAccountModal.module.css
@@ -47,7 +47,7 @@
   background-position: 0 center;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .warningText {
     column-count: 1;
   }
diff --git a/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.module.css b/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.module.css
index ccff8707f4..529ccbaaeb 100644
--- a/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.module.css
+++ b/app/components/modals/SetNewPassphraseModal/SetNewPassModalContent/SetNewPassModalContent.module.css
@@ -54,7 +54,7 @@
 .closeButtonTop:hover {
   opacity: 0.7;
 }
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .passphrase {
     max-height: 60%;
   }
diff --git a/app/components/modals/TrezorModals/TrezorModals.module.css b/app/components/modals/TrezorModals/TrezorModals.module.css
index 05b7695413..3db7aa14e9 100644
--- a/app/components/modals/TrezorModals/TrezorModals.module.css
+++ b/app/components/modals/TrezorModals/TrezorModals.module.css
@@ -71,7 +71,7 @@ h1 {
   flex-direction: row-reverse;
 }
 
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .pinModal,
   .passphraseModal,
   .togglePassphraseConfirmModal,
diff --git a/app/components/shared/Log/Log.module.css b/app/components/shared/Log/Log.module.css
index 25f5e80327..af12250f25 100644
--- a/app/components/shared/Log/Log.module.css
+++ b/app/components/shared/Log/Log.module.css
@@ -53,7 +53,7 @@ textarea {
   background-size: 5px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .logArea {
     width: 667px;
   }
@@ -63,7 +63,7 @@ textarea {
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .logs {
     margin: 30px 20px;
   }
diff --git a/app/components/shared/PrivacyForm/PrivacyForm.module.css b/app/components/shared/PrivacyForm/PrivacyForm.module.css
index 13cb14a695..c07df7d0c6 100644
--- a/app/components/shared/PrivacyForm/PrivacyForm.module.css
+++ b/app/components/shared/PrivacyForm/PrivacyForm.module.css
@@ -47,7 +47,7 @@
   color: var(--mixer-settings-disabled);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .privacyForm {
     display: grid;
     grid-template-columns: max-content 200px;
diff --git a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
index fbd986db7d..294f29b43b 100644
--- a/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
+++ b/app/components/shared/PurchaseTicketsForm/PurchaseTicketsForm.module.css
@@ -177,7 +177,7 @@
   margin-bottom: 5px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .buttonsArea {
     width: 667px;
   }
@@ -186,7 +186,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .purchaseForm {
     padding: 30px 20px;
     padding-bottom: 0;
diff --git a/app/components/shared/Subtitle/Subtitle.module.css b/app/components/shared/Subtitle/Subtitle.module.css
index e86170f03b..133eb15610 100644
--- a/app/components/shared/Subtitle/Subtitle.module.css
+++ b/app/components/shared/Subtitle/Subtitle.module.css
@@ -12,14 +12,14 @@
   margin-top: -20px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .tabbedPageSubtitle {
     margin-left: 0;
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabbedPageSubtitle {
     width: 355px;
     margin-left: 0;
diff --git a/app/components/shared/TabsHeader/TabsHeader.module.css b/app/components/shared/TabsHeader/TabsHeader.module.css
index 63fb2e8b37..57849dd19f 100644
--- a/app/components/shared/TabsHeader/TabsHeader.module.css
+++ b/app/components/shared/TabsHeader/TabsHeader.module.css
@@ -29,7 +29,7 @@
   background-color: var(--background-back-color) !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabs > li > span {
     color: transparent;
   }
diff --git a/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css
index 5e42a31f5b..1b39c85ac9 100644
--- a/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css
+++ b/app/components/shared/TicketAutoBuyerForm/TicketAutoBuyerForm.module.css
@@ -48,7 +48,7 @@
   text-align: center;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wrapper {
     padding: 20px;
   }
diff --git a/app/components/shared/TxHistory/TxHistory.module.css b/app/components/shared/TxHistory/TxHistory.module.css
index 483688c801..9c3ced48bb 100644
--- a/app/components/shared/TxHistory/TxHistory.module.css
+++ b/app/components/shared/TxHistory/TxHistory.module.css
@@ -403,7 +403,7 @@
   line-height: 1.6rem;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .info {
     grid-template-columns: 0.5fr 3.5fr 10fr 3fr;
   }
@@ -418,7 +418,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overviewRow {
     width: 355px;
   }
diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.module.css b/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.module.css
index 4d05d6758a..ae8ac48ca0 100644
--- a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.module.css
+++ b/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.module.css
@@ -131,7 +131,7 @@
   opacity: 0.7;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .actions.isRow {
     display: flex;
     flex-direction: column;
diff --git a/app/components/views/AccountsPage/Accounts/AccountsList/AccountsList.module.css b/app/components/views/AccountsPage/Accounts/AccountsList/AccountsList.module.css
index 10884dd18f..608fa3680d 100644
--- a/app/components/views/AccountsPage/Accounts/AccountsList/AccountsList.module.css
+++ b/app/components/views/AccountsPage/Accounts/AccountsList/AccountsList.module.css
@@ -3,7 +3,7 @@
   width: 740px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .contentNest {
     width: 667px;
   }
diff --git a/app/components/views/AgendaDetailsPage/AgendaDetails.module.css b/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
index 8dc7abeef7..1b86660c35 100644
--- a/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
+++ b/app/components/views/AgendaDetailsPage/AgendaDetails.module.css
@@ -60,13 +60,13 @@
   font-weight: var(--font-weight-semi-bold) !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .detailsText {
     width: 674px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .detailsText {
     padding-left: 20px;
     width: 355px;
diff --git a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.module.css b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.module.css
index 563796abd2..4d2c5d076e 100644
--- a/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.module.css
+++ b/app/components/views/AgendaDetailsPage/helpers/AgendaCard/AgendaCard.module.css
@@ -136,7 +136,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .overview {
     width: 634px;
   }
@@ -146,7 +146,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overview {
     width: 315px;
     padding: 10px !important;
diff --git a/app/components/views/AgendaDetailsPage/helpers/VoteSection/VoteSection.module.css b/app/components/views/AgendaDetailsPage/helpers/VoteSection/VoteSection.module.css
index 68d5b20d1b..772784fe6c 100644
--- a/app/components/views/AgendaDetailsPage/helpers/VoteSection/VoteSection.module.css
+++ b/app/components/views/AgendaDetailsPage/helpers/VoteSection/VoteSection.module.css
@@ -72,7 +72,7 @@
   top: 0.4rem !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .votePreference {
     flex-basis: 70%;
   }
@@ -86,7 +86,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .voteSection {
     width: 355px;
     padding: 10px 10px 10px 20px;
diff --git a/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.module.css b/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.module.css
index accc9bd3fe..3c37602e88 100644
--- a/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.module.css
+++ b/app/components/views/DexPage/ConfirmDexSeed/ConfirmDexSeed.module.css
@@ -109,7 +109,7 @@
   margin-left: 10px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .actions.isRow {
     display: flex;
     flex-direction: column;
diff --git a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.module.css b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.module.css
index 571375d3e1..59e5b7f8f8 100644
--- a/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.module.css
+++ b/app/components/views/DexPage/CreateDexAcctPage/CreateDexAcctPage.module.css
@@ -20,13 +20,13 @@
   grid-template-columns: max-content auto max-content max-content;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .dexContent {
     width: 634px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .dexContent {
     width: 355px;
     margin-left: 0;
diff --git a/app/components/views/DexPage/CreateWalletsPage/CreateWalletsPage.module.css b/app/components/views/DexPage/CreateWalletsPage/CreateWalletsPage.module.css
index d3ad943b95..88a77efb89 100644
--- a/app/components/views/DexPage/CreateWalletsPage/CreateWalletsPage.module.css
+++ b/app/components/views/DexPage/CreateWalletsPage/CreateWalletsPage.module.css
@@ -17,7 +17,7 @@
   margin-bottom: 1.5rem;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     width: 355px;
   }
diff --git a/app/components/views/DexPage/RegisterPage/RegisterPage.module.css b/app/components/views/DexPage/RegisterPage/RegisterPage.module.css
index 63ab18f190..bfd4c89d10 100644
--- a/app/components/views/DexPage/RegisterPage/RegisterPage.module.css
+++ b/app/components/views/DexPage/RegisterPage/RegisterPage.module.css
@@ -43,7 +43,7 @@
   color: var(--grey-7);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .dexAddressLabel label {
     font-size: 13px;
   }
diff --git a/app/components/views/DexPage/RegisterPage/SendForm.module.css b/app/components/views/DexPage/RegisterPage/SendForm.module.css
index d8c8437f53..5dab98c20f 100644
--- a/app/components/views/DexPage/RegisterPage/SendForm.module.css
+++ b/app/components/views/DexPage/RegisterPage/SendForm.module.css
@@ -48,7 +48,7 @@
   display: flex;
   align-items: center;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .isRow.sendArea {
     flex-direction: column;
     height: auto;
diff --git a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendAllFundsIcon/SendAllFundsIcon.module.css b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendAllFundsIcon/SendAllFundsIcon.module.css
index 93b3ba9db8..b01ecbc94b 100644
--- a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendAllFundsIcon/SendAllFundsIcon.module.css
+++ b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendAllFundsIcon/SendAllFundsIcon.module.css
@@ -35,7 +35,7 @@
   width: max-content;
   text-align: center;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .sendAllFundsIcon {
     grid-row: 3;
   }
diff --git a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.module.css b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.module.css
index f0b03d1d49..71da04953a 100644
--- a/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.module.css
+++ b/app/components/views/DexPage/RegisterPage/SendOutputRow/SendOutputRow.module.css
@@ -31,14 +31,14 @@
 .tooltipSendToSelf {
   width: 18rem;
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .sendOutputContainer {
     grid-template-columns: max-content 240px minmax(max-content, 1fr) 240px;
     padding: 7px 0 26px 0;
     width: 594px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .sendOutputContainer {
     grid-template-columns: max-content 256px;
     grid-template-rows: repeat(3, 25px);
diff --git a/app/components/views/GetStartedPage/AdvancedStartup/AppDataForm/AppDataForm.module.css b/app/components/views/GetStartedPage/AdvancedStartup/AppDataForm/AppDataForm.module.css
index f8df12bca2..94806d3375 100644
--- a/app/components/views/GetStartedPage/AdvancedStartup/AppDataForm/AppDataForm.module.css
+++ b/app/components/views/GetStartedPage/AdvancedStartup/AppDataForm/AppDataForm.module.css
@@ -1,4 +1,4 @@
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .label {
     width: 130px;
   }
diff --git a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.module.css b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.module.css
index 889de12428..1c400668d4 100644
--- a/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/AdvancedStartup/Form/Form.module.css
@@ -22,7 +22,7 @@
   height: 258px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .advancedDesc {
     width: 315px;
     margin-top: 0;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.module.css b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.module.css
index eec8793182..3371a44bef 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/ConfirmSeedForm.module.css
@@ -94,7 +94,7 @@
   margin-right: 5px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     margin-left: 0;
     margin-top: -50px;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.module.css b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.module.css
index abe82d7a93..6177668553 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/ConfirmSeed/ConfirmSeedForm/SeedWordRow/SeedWordRow.module.css
@@ -47,7 +47,7 @@
   background: var(--seedword-button-invalid-bg);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .buttonContainer button {
     width: 110px;
   }
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
index a8fc839510..277623a4b8 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
@@ -42,7 +42,7 @@
   align-items: initial;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .copy {
     grid-column: 1 / 4;
     background-position: 80px;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.module.css
index 0f15d342cd..b520134c13 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/ButtonsBar/ButtonsBar.module.css
@@ -22,7 +22,7 @@
   color: var(--title-text-and-button-background-hovered);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .buttonsBar {
     display: flex;
     justify-content: flex-end;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/Container/Container.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/Container/Container.module.css
index 8564955280..abc390859c 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/Container/Container.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/Container/Container.module.css
@@ -2,7 +2,7 @@
   margin-left: 280px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     margin-left: 10px;
   }
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/Section/Section.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/Section/Section.module.css
index 8e1457a33f..7de31c82b2 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/Section/Section.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/Section/Section.module.css
@@ -2,13 +2,13 @@
   margin-bottom: 30px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .section {
     margin-left: 0;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .section {
     flex-direction: column;
   }
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedArea/SeedArea.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedArea/SeedArea.module.css
index 54e715a3c2..0db15ab90d 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedArea/SeedArea.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/SeedArea/SeedArea.module.css
@@ -6,7 +6,7 @@
   align-items: baseline;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .seedArea {
     grid-template-columns: repeat(3, 1fr);
     width: 353px;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/helpers/TitleWrapper/TitleWrapper.module.css b/app/components/views/GetStartedPage/CreateWalletPage/helpers/TitleWrapper/TitleWrapper.module.css
index 2654560cc7..c694af0779 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/helpers/TitleWrapper/TitleWrapper.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/helpers/TitleWrapper/TitleWrapper.module.css
@@ -2,7 +2,7 @@
   width: 692px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .titleWrapper {
     flex-direction: column;
     margin-bottom: 20px;
diff --git a/app/components/views/GetStartedPage/GetStarted.module.css b/app/components/views/GetStartedPage/GetStarted.module.css
index 6f5ccc8b76..1f6ffd7a00 100644
--- a/app/components/views/GetStartedPage/GetStarted.module.css
+++ b/app/components/views/GetStartedPage/GetStarted.module.css
@@ -81,7 +81,7 @@
   text-align: center;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     padding-top: 23px;
     margin-left: 0;
diff --git a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
index 75d5b95e7e..9e803979ef 100644
--- a/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
+++ b/app/components/views/GetStartedPage/GetStartedMachinePage/GetStartedMachinePage.module.css
@@ -15,7 +15,7 @@
   white-space: pre-line;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .loaderBar {
     margin-bottom: 0;
     position: fixed;
diff --git a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
index 9ae995d57a..d0a9383f59 100644
--- a/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
+++ b/app/components/views/GetStartedPage/LanguageSelectPage/Page/Page.module.css
@@ -12,7 +12,7 @@
   margin-right: 0.5em;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .button {
     padding: 6px 20px;
   }
diff --git a/app/components/views/GetStartedPage/Logs/Logs.module.css b/app/components/views/GetStartedPage/Logs/Logs.module.css
index 15fed4914b..7d351a836d 100644
--- a/app/components/views/GetStartedPage/Logs/Logs.module.css
+++ b/app/components/views/GetStartedPage/Logs/Logs.module.css
@@ -4,14 +4,14 @@
   right: 0;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .backButtonArea {
     left: 622px;
     right: initial;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .backButtonArea {
     top: 30px;
     left: 342px;
diff --git a/app/components/views/GetStartedPage/PrivacyPage/PrivacyOption/PrivacyOption.module.css b/app/components/views/GetStartedPage/PrivacyPage/PrivacyOption/PrivacyOption.module.css
index 8f305b7aa6..86ff1e2bc8 100644
--- a/app/components/views/GetStartedPage/PrivacyPage/PrivacyOption/PrivacyOption.module.css
+++ b/app/components/views/GetStartedPage/PrivacyPage/PrivacyOption/PrivacyOption.module.css
@@ -68,7 +68,7 @@
   background-image: var(--disable-spv);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .option {
     width: 100%;
     margin: 0 0 10px 0;
diff --git a/app/components/views/GetStartedPage/PrivacyPage/PrivacyOptions/PrivacyOptions.module.css b/app/components/views/GetStartedPage/PrivacyPage/PrivacyOptions/PrivacyOptions.module.css
index 4b86f8d4e1..679b249b95 100644
--- a/app/components/views/GetStartedPage/PrivacyPage/PrivacyOptions/PrivacyOptions.module.css
+++ b/app/components/views/GetStartedPage/PrivacyPage/PrivacyOptions/PrivacyOptions.module.css
@@ -4,7 +4,7 @@
   padding-right: 2em;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .options {
     margin: 0 -10px;
     margin: 0;
@@ -12,7 +12,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .options {
     flex-direction: column;
   }
diff --git a/app/components/views/GetStartedPage/PrivacyPage/TopLevelOptions/TopLevelOptions.module.css b/app/components/views/GetStartedPage/PrivacyPage/TopLevelOptions/TopLevelOptions.module.css
index b5d1af5a5c..bd0112a483 100644
--- a/app/components/views/GetStartedPage/PrivacyPage/TopLevelOptions/TopLevelOptions.module.css
+++ b/app/components/views/GetStartedPage/PrivacyPage/TopLevelOptions/TopLevelOptions.module.css
@@ -1,4 +1,4 @@
-@media screen and (max-width: 1000px) {
+@media (--md-viewport) {
   .wide {
     justify-content: flex-start;
     margin: 0;
@@ -21,7 +21,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wide {
     flex-direction: column;
     justify-content: flex-start;
diff --git a/app/components/views/GetStartedPage/ReleaseNotes/Form/Form.module.css b/app/components/views/GetStartedPage/ReleaseNotes/Form/Form.module.css
index 0d0b9e9c44..cef1a5e59a 100644
--- a/app/components/views/GetStartedPage/ReleaseNotes/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/ReleaseNotes/Form/Form.module.css
@@ -84,7 +84,7 @@
   background-image: var(--release-image-v170);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .image {
     flex: 1;
     margin-top: 14px;
@@ -96,7 +96,7 @@
   }
 }
 
-@media screen and (max-width: 1000px) {
+@media (--md-viewport) {
   .text {
     max-width: inherit;
     margin-left: 15px;
@@ -107,7 +107,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .text {
     margin: 10px 0 0 0;
   }
diff --git a/app/components/views/GetStartedPage/Settings/Settings.module.css b/app/components/views/GetStartedPage/Settings/Settings.module.css
index e9d81908a0..b323aeaeeb 100644
--- a/app/components/views/GetStartedPage/Settings/Settings.module.css
+++ b/app/components/views/GetStartedPage/Settings/Settings.module.css
@@ -66,7 +66,7 @@
   }
 }
 
-@media screen and (min-width: 768px) {
+@media (--bigger-than-sm-viewport) {
   .timezoneBox ul li > div {
     margin: 0 !important;
   }
@@ -82,7 +82,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabsContainer {
     margin: 0 -2rem;
   }
diff --git a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
index 647ffcfe0c..b375606947 100644
--- a/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
+++ b/app/components/views/GetStartedPage/SetupWallet/SetupWallet.module.css
@@ -9,7 +9,7 @@
   background-position: 15px 15px;
   background-size: 30px;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .loaderBar {
     margin-bottom: 0;
     position: fixed;
diff --git a/app/components/views/GetStartedPage/TutorialPage/Tutorial.module.css b/app/components/views/GetStartedPage/TutorialPage/Tutorial.module.css
index bec099dfad..97bc7f8d66 100644
--- a/app/components/views/GetStartedPage/TutorialPage/Tutorial.module.css
+++ b/app/components/views/GetStartedPage/TutorialPage/Tutorial.module.css
@@ -77,7 +77,7 @@ video {
   width: 34px;
 }
 
-@media screen and (max-width: 1000px) {
+@media (--md-viewport) {
   .tutorial .main {
     top: 88px;
     left: 21px;
@@ -89,7 +89,7 @@ video {
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tutorialMainToolbar {
     justify-content: space-between;
     flex-wrap: nowrap;
diff --git a/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css b/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
index 1a4b9ee559..01409a7236 100644
--- a/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/WalletSelection/Form/Form.module.css
@@ -199,7 +199,7 @@
   animation: bounce 1s var(--ease-in-out-quart) infinite;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .editWalletsButton {
     margin: 5px 0;
   }
diff --git a/app/components/views/GetStartedPage/helpers/BackButtonArea/BackButtonArea.module.css b/app/components/views/GetStartedPage/helpers/BackButtonArea/BackButtonArea.module.css
index a662e5f7c6..f74fe1ebbb 100644
--- a/app/components/views/GetStartedPage/helpers/BackButtonArea/BackButtonArea.module.css
+++ b/app/components/views/GetStartedPage/helpers/BackButtonArea/BackButtonArea.module.css
@@ -6,7 +6,7 @@
   line-height: 14px;
 }
 
-@media screen and (max-width: 560px) {
+@media (--xs-viewport) {
   .backButtonArea {
     right: 59px;
   }
diff --git a/app/components/views/GetStartedPage/helpers/ButtonsBar/ButtonsBar.module.css b/app/components/views/GetStartedPage/helpers/ButtonsBar/ButtonsBar.module.css
index 7870db9158..bea95899bc 100644
--- a/app/components/views/GetStartedPage/helpers/ButtonsBar/ButtonsBar.module.css
+++ b/app/components/views/GetStartedPage/helpers/ButtonsBar/ButtonsBar.module.css
@@ -4,7 +4,7 @@
   right: 0;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .buttonsBar {
     position: fixed;
     margin-left: 10px;
diff --git a/app/components/views/GetStartedPage/helpers/Content/Content.module.css b/app/components/views/GetStartedPage/helpers/Content/Content.module.css
index 94a8ba8e94..10c5b1b416 100644
--- a/app/components/views/GetStartedPage/helpers/Content/Content.module.css
+++ b/app/components/views/GetStartedPage/helpers/Content/Content.module.css
@@ -4,13 +4,13 @@
   padding-top: 106px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .content {
     padding: 56px 0 0 0;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .content {
     padding: 40px 0 0 0;
   }
diff --git a/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css b/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
index 8a05de1bea..14177034ee 100644
--- a/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
+++ b/app/components/views/GetStartedPage/helpers/ContentContainer/ContentContainer.module.css
@@ -6,7 +6,7 @@
   float: left;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .contentContainer {
     font-size: 23px;
     margin-bottom: 20px;
diff --git a/app/components/views/GetStartedPage/helpers/Header/Header.module.css b/app/components/views/GetStartedPage/helpers/Header/Header.module.css
index 71f4e8a3e3..6c6a7b1562 100644
--- a/app/components/views/GetStartedPage/helpers/Header/Header.module.css
+++ b/app/components/views/GetStartedPage/helpers/Header/Header.module.css
@@ -10,7 +10,7 @@
 .tutorialButton:hover {
   background-color: var(--title-text-and-button-background-hovered);
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .loaderButtons {
     margin-bottom: 50px;
   }
diff --git a/app/components/views/GetStartedPage/helpers/Input/Input.module.css b/app/components/views/GetStartedPage/helpers/Input/Input.module.css
index 05aa9f5a91..472eb0f6f0 100644
--- a/app/components/views/GetStartedPage/helpers/Input/Input.module.css
+++ b/app/components/views/GetStartedPage/helpers/Input/Input.module.css
@@ -4,7 +4,7 @@
   width: 295px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .input {
     width: 243px;
   }
diff --git a/app/components/views/GetStartedPage/helpers/Label/Label.module.css b/app/components/views/GetStartedPage/helpers/Label/Label.module.css
index 2287c3186e..b95dbc9ee8 100644
--- a/app/components/views/GetStartedPage/helpers/Label/Label.module.css
+++ b/app/components/views/GetStartedPage/helpers/Label/Label.module.css
@@ -6,7 +6,7 @@
   font-size: 13px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .label {
     width: 77px;
   }
diff --git a/app/components/views/GetStartedPage/helpers/Title/Title.module.css b/app/components/views/GetStartedPage/helpers/Title/Title.module.css
index 8b75268997..00540e5b75 100644
--- a/app/components/views/GetStartedPage/helpers/Title/Title.module.css
+++ b/app/components/views/GetStartedPage/helpers/Title/Title.module.css
@@ -5,7 +5,7 @@
   width: 100%;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .title {
     font-size: 23px;
   }
diff --git a/app/components/views/GovernancePage/Blockchain/Blockchain.module.css b/app/components/views/GovernancePage/Blockchain/Blockchain.module.css
index 6b7c6b7413..5384b2dda7 100644
--- a/app/components/views/GovernancePage/Blockchain/Blockchain.module.css
+++ b/app/components/views/GovernancePage/Blockchain/Blockchain.module.css
@@ -61,7 +61,7 @@
   width: 76.4rem;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .agendaWrapper {
     margin-left: 35px;
   }
@@ -70,7 +70,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .agendaWrapper {
     margin: 20px;
   }
diff --git a/app/components/views/GovernancePage/PageHeader/PageHeader.module.css b/app/components/views/GovernancePage/PageHeader/PageHeader.module.css
index f5c42a2fc6..cefdea5182 100644
--- a/app/components/views/GovernancePage/PageHeader/PageHeader.module.css
+++ b/app/components/views/GovernancePage/PageHeader/PageHeader.module.css
@@ -23,7 +23,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .header {
     width: 696px;
     padding-left: 55px;
@@ -34,7 +34,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .header {
     width: 338px;
     padding-left: 20px;
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.module.css b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.module.css
index 41b786f033..038926b115 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.module.css
+++ b/app/components/views/GovernancePage/Proposals/ProposalsList/ProposalsList.module.css
@@ -34,7 +34,7 @@
   padding-top: 22px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .proposalList {
     margin-left: 35px;
   }
@@ -43,7 +43,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .proposalList {
     padding-bottom: 100px;
     margin-left: 10px;
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css
index 3c09c32333..285b41f268 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css
+++ b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css
@@ -105,13 +105,13 @@
   background-color: var(--vote-no-color);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .listItem {
     width: 700px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .listItem {
     width: 100%;
   }
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css b/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
index 40b9ada7a6..f3e8269912 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
+++ b/app/components/views/GovernancePage/Proposals/ProposalsTab.module.css
@@ -78,7 +78,7 @@
   cursor: pointer;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .tabs {
     margin-left: 0;
     padding-left: 55px;
@@ -93,7 +93,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabs {
     margin-left: 0;
     padding-left: 20px;
diff --git a/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.module.css b/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.module.css
index bb5fd182fc..86524d9a02 100644
--- a/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.module.css
+++ b/app/components/views/GovernancePage/TreasurySpendingTab/TreasurySpendingTab.module.css
@@ -22,13 +22,13 @@
   margin-bottom: 5px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .pikeysWrapper {
     margin-left: 35px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .pikeysWrapper {
     margin: 20px;
   }
diff --git a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/TreasuryPolicyCard/TreasuryPolicyCard.module.css b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/TreasuryPolicyCard/TreasuryPolicyCard.module.css
index d6c3263312..65aaa3629f 100644
--- a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/TreasuryPolicyCard/TreasuryPolicyCard.module.css
+++ b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/TreasuryPolicyCard/TreasuryPolicyCard.module.css
@@ -15,7 +15,7 @@
   padding: 1rem !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .overview {
     width: 634px;
     padding: 2rem;
@@ -26,7 +26,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overview {
     width: 315px;
     padding: 10px !important;
diff --git a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/CastVoteModalButton/CastVoteModalButton.module.css b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/CastVoteModalButton/CastVoteModalButton.module.css
index a3d0b03eaf..e4ca95a442 100644
--- a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/CastVoteModalButton/CastVoteModalButton.module.css
+++ b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/CastVoteModalButton/CastVoteModalButton.module.css
@@ -33,7 +33,7 @@
   margin-left: 5px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .voteButton {
     margin: 0;
     align-self: center;
diff --git a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/VoteSection.module.css b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/VoteSection.module.css
index 29f1106df9..cabb29b2ac 100644
--- a/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/VoteSection.module.css
+++ b/app/components/views/GovernancePage/TreasurySpendingTab/helpers/VoteSection/VoteSection.module.css
@@ -67,7 +67,7 @@
   top: 0.4rem !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .voteSection {
     padding: 10px 10px 10px 0;
   }
diff --git a/app/components/views/HomePage/GovernanceNotification/GovernanceNotification.module.css b/app/components/views/HomePage/GovernanceNotification/GovernanceNotification.module.css
index 782e418c7a..c73d5b63c0 100644
--- a/app/components/views/HomePage/GovernanceNotification/GovernanceNotification.module.css
+++ b/app/components/views/HomePage/GovernanceNotification/GovernanceNotification.module.css
@@ -25,7 +25,7 @@
   background-color: var(--stroke-color-focused);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .votes {
     padding: 0 0 0.5rem 0;
   }
diff --git a/app/components/views/HomePage/HomePage.module.css b/app/components/views/HomePage/HomePage.module.css
index eda9883829..c923c33146 100644
--- a/app/components/views/HomePage/HomePage.module.css
+++ b/app/components/views/HomePage/HomePage.module.css
@@ -133,7 +133,7 @@
   justify-content: space-between;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .overviewTransactionsTicket {
     padding: 30px 20px;
   }
@@ -152,7 +152,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overviewTab {
     display: inline-block;
     width: 30px;
@@ -193,7 +193,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overviewTab {
     display: inline-block;
     width: 30px;
diff --git a/app/components/views/HomePage/RecentTickets/RecentTickets.module.css b/app/components/views/HomePage/RecentTickets/RecentTickets.module.css
index c4e37362bf..6532a04b3a 100644
--- a/app/components/views/HomePage/RecentTickets/RecentTickets.module.css
+++ b/app/components/views/HomePage/RecentTickets/RecentTickets.module.css
@@ -51,7 +51,7 @@
   background-image: var(--ticket-lifecycle-icon);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .ticketTxWrapper {
     margin-top: 20px;
     margin-left: 0;
diff --git a/app/components/views/HomePage/RecentTransactions/RecentTransactions.module.css b/app/components/views/HomePage/RecentTransactions/RecentTransactions.module.css
index 00306472d8..1e75e46b22 100644
--- a/app/components/views/HomePage/RecentTransactions/RecentTransactions.module.css
+++ b/app/components/views/HomePage/RecentTransactions/RecentTransactions.module.css
@@ -44,7 +44,7 @@
   background-image: var(--buy-decred-icon);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wrapper {
     width: 100%;
   }
diff --git a/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.module.css b/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.module.css
index 699534d625..d5e6edea6b 100644
--- a/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.module.css
+++ b/app/components/views/LNPage/ChannelDetailsPage/ChannelDetails.module.css
@@ -62,7 +62,7 @@
   opacity: 0.85;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 355px;
   }
diff --git a/app/components/views/LNPage/ChannelsTab/ChannelsTab.module.css b/app/components/views/LNPage/ChannelsTab/ChannelsTab.module.css
index 58b5d49497..bcd04a50f2 100644
--- a/app/components/views/LNPage/ChannelsTab/ChannelsTab.module.css
+++ b/app/components/views/LNPage/ChannelsTab/ChannelsTab.module.css
@@ -214,7 +214,7 @@
   margin: 20px 0 30px 0;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 355px;
   }
diff --git a/app/components/views/LNPage/ConnectPage/ConnectPage.module.css b/app/components/views/LNPage/ConnectPage/ConnectPage.module.css
index a9e0ba60ce..3d1ee5af72 100644
--- a/app/components/views/LNPage/ConnectPage/ConnectPage.module.css
+++ b/app/components/views/LNPage/ConnectPage/ConnectPage.module.css
@@ -31,14 +31,14 @@
   margin-top: 1em;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .buttonContrainer,
   .connectOpts {
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .buttonContrainer,
   .connectOpts {
     width: 355px;
diff --git a/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.module.css b/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.module.css
index 092dfc0d5f..9f20182c5b 100644
--- a/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.module.css
+++ b/app/components/views/LNPage/ConnectPage/CreateLNWallet/CreateLNWallet.module.css
@@ -71,7 +71,7 @@
   margin-left: 10px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .pathBrowseInput input,
   .receiveSelectAccountSelectInput {
     width: 288px;
diff --git a/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.module.css b/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.module.css
index 3990ae14f7..ed322da95d 100644
--- a/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.module.css
+++ b/app/components/views/LNPage/ConnectPage/CreationWarning/CreationWarning.module.css
@@ -18,7 +18,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 35.5rem;
   }
diff --git a/app/components/views/LNPage/OverviewTab/OverviewTab.module.css b/app/components/views/LNPage/OverviewTab/OverviewTab.module.css
index f56bf04f0c..5dd0749937 100644
--- a/app/components/views/LNPage/OverviewTab/OverviewTab.module.css
+++ b/app/components/views/LNPage/OverviewTab/OverviewTab.module.css
@@ -24,7 +24,7 @@
   opacity: 0.85;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 355px;
   }
diff --git a/app/components/views/LNPage/OverviewTab/helpers/AccountOverview/AccountOverview.module.css b/app/components/views/LNPage/OverviewTab/helpers/AccountOverview/AccountOverview.module.css
index 702a44e3d2..d0fa029285 100644
--- a/app/components/views/LNPage/OverviewTab/helpers/AccountOverview/AccountOverview.module.css
+++ b/app/components/views/LNPage/OverviewTab/helpers/AccountOverview/AccountOverview.module.css
@@ -75,7 +75,7 @@
   background-color: var(--grey-3);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
     grid-row-gap: 10px;
diff --git a/app/components/views/LNPage/OverviewTab/helpers/NetworkStats/NetworkStats.module.css b/app/components/views/LNPage/OverviewTab/helpers/NetworkStats/NetworkStats.module.css
index bd3dc83c01..440c8acf1e 100644
--- a/app/components/views/LNPage/OverviewTab/helpers/NetworkStats/NetworkStats.module.css
+++ b/app/components/views/LNPage/OverviewTab/helpers/NetworkStats/NetworkStats.module.css
@@ -71,7 +71,7 @@
   height: 24px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .grid {
     grid-template-columns: repeat(2, 1fr);
     grid-row-gap: 10px;
diff --git a/app/components/views/LNPage/OverviewTab/helpers/RecentChannelRow/RecentChannelRow.module.css b/app/components/views/LNPage/OverviewTab/helpers/RecentChannelRow/RecentChannelRow.module.css
index dfab442889..2ea100b7c0 100644
--- a/app/components/views/LNPage/OverviewTab/helpers/RecentChannelRow/RecentChannelRow.module.css
+++ b/app/components/views/LNPage/OverviewTab/helpers/RecentChannelRow/RecentChannelRow.module.css
@@ -51,7 +51,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .value .channelPoint {
     max-width: 242px;
   }
diff --git a/app/components/views/LNPage/ReceiveTab/InvoiceRow/InvoiceRow.module.css b/app/components/views/LNPage/ReceiveTab/InvoiceRow/InvoiceRow.module.css
index 25e62ba7c4..61659a4224 100644
--- a/app/components/views/LNPage/ReceiveTab/InvoiceRow/InvoiceRow.module.css
+++ b/app/components/views/LNPage/ReceiveTab/InvoiceRow/InvoiceRow.module.css
@@ -47,7 +47,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .value .rhash {
     max-width: 242px;
   }
diff --git a/app/components/views/LNPage/ReceiveTab/ReceiveTab.module.css b/app/components/views/LNPage/ReceiveTab/ReceiveTab.module.css
index acaeac0c30..5126cad122 100644
--- a/app/components/views/LNPage/ReceiveTab/ReceiveTab.module.css
+++ b/app/components/views/LNPage/ReceiveTab/ReceiveTab.module.css
@@ -81,7 +81,7 @@
   text-align: center;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .lnAddInvoice {
     padding: 30px 20px;
   }
diff --git a/app/components/views/LNPage/SendTab/PaymentRow/PaymentRow.module.css b/app/components/views/LNPage/SendTab/PaymentRow/PaymentRow.module.css
index 24629438d3..db6f01ede3 100644
--- a/app/components/views/LNPage/SendTab/PaymentRow/PaymentRow.module.css
+++ b/app/components/views/LNPage/SendTab/PaymentRow/PaymentRow.module.css
@@ -46,7 +46,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .value .paymentHash {
     max-width: 242px;
   }
diff --git a/app/components/views/LNPage/SendTab/SendTab.module.css b/app/components/views/LNPage/SendTab/SendTab.module.css
index 474e3c691c..c5b367cad1 100644
--- a/app/components/views/LNPage/SendTab/SendTab.module.css
+++ b/app/components/views/LNPage/SendTab/SendTab.module.css
@@ -83,7 +83,7 @@
   text-align: center;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 355px;
   }
diff --git a/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.module.css b/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.module.css
index 8933fe4ace..e8c76aaea5 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.module.css
+++ b/app/components/views/PrivacyPage/PrivacyTab/PrivacyContent.module.css
@@ -153,13 +153,13 @@
   width: 17rem;
   text-align: center;
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .privacyContent {
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .privacyContent {
     width: 355px;
     margin-left: 0;
diff --git a/app/components/views/PrivacyPage/PrivacyTab/SendForm.module.css b/app/components/views/PrivacyPage/PrivacyTab/SendForm.module.css
index a7e92c8190..e6e538b1bc 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/SendForm.module.css
+++ b/app/components/views/PrivacyPage/PrivacyTab/SendForm.module.css
@@ -54,14 +54,14 @@
   text-align: center;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .sendButtonArea {
     bottom: 50px;
     right: 33px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .isRow.sendArea {
     flex-direction: column;
     height: auto;
diff --git a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
index fe3e9cf946..3b0863861f 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
+++ b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
@@ -88,14 +88,14 @@
 .tooltipSendToSelf {
   width: 18rem;
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .sendOutputContainer {
     grid-template-columns: max-content 240px minmax(max-content, 1fr) 240px;
     padding: 7px 0 26px 0;
     width: 594px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .sendOutputContainer {
     grid-template-columns: max-content 256px;
     grid-template-rows: repeat(3, 25px);
diff --git a/app/components/views/PrivacyPage/SecurityTab/SecurityTab.module.css b/app/components/views/PrivacyPage/SecurityTab/SecurityTab.module.css
index 88e2abe92e..781ca9fa5a 100644
--- a/app/components/views/PrivacyPage/SecurityTab/SecurityTab.module.css
+++ b/app/components/views/PrivacyPage/SecurityTab/SecurityTab.module.css
@@ -64,13 +64,13 @@
   cursor: default;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .securityPageTab {
     width: 649px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .securityPageTab {
     margin-top: 30px;
     width: 355px;
diff --git a/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.module.css b/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.module.css
index b2729c390e..2f2681e69e 100644
--- a/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.module.css
+++ b/app/components/views/PrivacyPage/SecurityTab/SignMessage/SignMessageForm.module.css
@@ -38,13 +38,13 @@
   width: 540px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .formRowFieldMessage {
     width: 450px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .formRowField,
   .formRowFieldMessage {
     width: 224px;
diff --git a/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.module.css b/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.module.css
index 9d6edd25a8..0bf4cd6453 100644
--- a/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.module.css
+++ b/app/components/views/PrivacyPage/SecurityTab/ValidateAddress/ValidateAddressForm.module.css
@@ -61,14 +61,14 @@
   max-width: 300px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .validateAddressForm,
   .validateAddressOwnedForm {
     width: 649px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .validateAddressForm,
   .validateAddressOwnedForm {
     width: 355px;
diff --git a/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.module.css b/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.module.css
index 8d1ea4ee1a..807f60f594 100644
--- a/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.module.css
+++ b/app/components/views/PrivacyPage/SecurityTab/VerifyMessage/VerifyMessageForm.module.css
@@ -44,13 +44,13 @@
   width: 540px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .formRowFieldMessage {
     width: 450px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .formRowField,
   .formRowFieldMessage {
     width: 224px;
diff --git a/app/components/views/ProposalDetailsPage/ProposalDetails.module.css b/app/components/views/ProposalDetailsPage/ProposalDetails.module.css
index c014cce7fb..04dbfc997f 100644
--- a/app/components/views/ProposalDetailsPage/ProposalDetails.module.css
+++ b/app/components/views/ProposalDetailsPage/ProposalDetails.module.css
@@ -79,7 +79,7 @@
   font-weight: var(--font-weight-semi-bold) !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .detailsText {
     width: 665px;
   }
@@ -90,7 +90,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .detailsText {
     padding-left: 20px;
     width: 355px;
diff --git a/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.module.css b/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.module.css
index a243f0d8e0..2374b575c4 100644
--- a/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.module.css
+++ b/app/components/views/ProposalDetailsPage/helpers/ProposalCard/ProposalCard.module.css
@@ -109,7 +109,7 @@
   color: var(--tab-text-active-color) !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .overview {
     width: 626px;
   }
@@ -123,7 +123,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overview {
     width: 315px;
     padding: 10px !important;
diff --git a/app/components/views/ProposalDetailsPage/helpers/VotePreferenceWrapper/VotePreference/VotePreference.module.css b/app/components/views/ProposalDetailsPage/helpers/VotePreferenceWrapper/VotePreference/VotePreference.module.css
index 14c475515d..038f22f932 100644
--- a/app/components/views/ProposalDetailsPage/helpers/VotePreferenceWrapper/VotePreference/VotePreference.module.css
+++ b/app/components/views/ProposalDetailsPage/helpers/VotePreferenceWrapper/VotePreference/VotePreference.module.css
@@ -45,7 +45,7 @@
   top: 0.4rem !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .votePreference {
     flex-basis: initial;
   }
diff --git a/app/components/views/ProposalDetailsPage/helpers/VoteSection/VoteSection.module.css b/app/components/views/ProposalDetailsPage/helpers/VoteSection/VoteSection.module.css
index 1adf74d674..4868b84dec 100644
--- a/app/components/views/ProposalDetailsPage/helpers/VoteSection/VoteSection.module.css
+++ b/app/components/views/ProposalDetailsPage/helpers/VoteSection/VoteSection.module.css
@@ -13,13 +13,13 @@
   font-weight: 600;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .voteSection {
     width: 665px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .voteSection {
     width: 355px;
   }
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
index 41e6aa8391..2cad847eaf 100644
--- a/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/NetworkSettings/NetworkSettings.module.css
@@ -12,7 +12,7 @@
   color: var(--main-dark-blue) !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     grid-template-columns: 1fr;
   }
diff --git a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
index 47d4dd0e17..3151a9ce6a 100644
--- a/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
+++ b/app/components/views/SettingsPage/ConnectivitySettingsTab/ProxySettings/ProxySettings.module.css
@@ -8,7 +8,7 @@
   color: var(--main-dark-blue) !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     grid-template-columns: 1fr;
   }
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
index dd515e85df..df57b3fc58 100644
--- a/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/GeneralSettings.module.css
@@ -19,7 +19,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wrapper {
     grid-template-columns: repeat(1, 35.5rem);
   }
diff --git a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
index bfc63b1eb6..d49193d586 100644
--- a/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
+++ b/app/components/views/SettingsPage/GeneralSettingsTab/UISettings/UISettings.module.css
@@ -19,7 +19,7 @@
   text-decoration: underline;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     grid-template-columns: 1fr;
   }
diff --git a/app/components/views/SettingsPage/LinksTab/LinksTab.module.css b/app/components/views/SettingsPage/LinksTab/LinksTab.module.css
index fe7830d163..bfd76e2b41 100644
--- a/app/components/views/SettingsPage/LinksTab/LinksTab.module.css
+++ b/app/components/views/SettingsPage/LinksTab/LinksTab.module.css
@@ -6,13 +6,13 @@
   max-width: 740px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .list {
     margin-left: 0;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .list {
     margin-left: 0;
     flex-direction: column;
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
index 99a0d1b91e..d9977375d6 100644
--- a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacySettings/PrivacySettings.module.css
@@ -10,7 +10,7 @@
   color: var(--grey-7);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     grid-template-columns: 1fr;
   }
diff --git a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
index 1e4a9c6ce9..6dbd822487 100644
--- a/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
+++ b/app/components/views/SettingsPage/PrivacyandSecuritySettingsTab/PrivacyandSecuritySettings.module.css
@@ -12,7 +12,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wrapper {
     grid-template-columns: repeat(1, 35.5rem);
   }
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.module.css
index 0e82f8dbcb..b048d3888b 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/CrossfadingImages/CrossfadingImages.module.css
@@ -251,14 +251,14 @@
   background-image: var(--tutorial-identity-slide4);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .imageContainer,
   .image {
     width: 55rem;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .imageContainer,
   .image {
     width: 27rem;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.module.css
index 2ae61fdb5c..eea8a19b11 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/PagedTutorial/PagedTutorial.module.css
@@ -168,13 +168,13 @@
   opacity: 0.5;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .tabsContainer,
   .tabContentWrapper {
     width: 67.5rem;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tabsContainer,
   .tabContentWrapper {
     width: 35.5rem;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
index ed3c71cb60..2d05614a96 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialCard/TutorialCard.module.css
@@ -126,13 +126,13 @@
   background-image: var(--tutorial-lifecycle-thumb);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .overview {
     width: 63.4rem;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .overview {
     width: 31.5rem;
     padding: 10px !important;
diff --git a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
index 9259510a5b..eea55b9f86 100644
--- a/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
+++ b/app/components/views/SettingsPage/TutorialsTab/helpers/TutorialPage/TutorialPage.module.css
@@ -61,13 +61,13 @@
   font-weight: var(--font-weight-semi-bold) !important;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .detailsText {
     width: 6.74rem;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .detailsText {
     padding-left: 2rem;
     width: 3.55rem;
diff --git a/app/components/views/SettingsPage/helpers/Box/Box.module.css b/app/components/views/SettingsPage/helpers/Box/Box.module.css
index ca1a442b5e..c22c1c05cd 100644
--- a/app/components/views/SettingsPage/helpers/Box/Box.module.css
+++ b/app/components/views/SettingsPage/helpers/Box/Box.module.css
@@ -4,7 +4,7 @@
   width: 100%;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .box {
     padding: 3rem 2rem;
   }
diff --git a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
index b9da7adffc..aa241d34f0 100644
--- a/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
+++ b/app/components/views/SettingsPage/helpers/Wrapper/Wrapper.module.css
@@ -11,7 +11,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .wrapper {
     grid-template-columns: repeat(1, 35.5rem);
   }
diff --git a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
index 6ffd940e7f..9db449b473 100644
--- a/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
+++ b/app/components/views/TicketsPage/MyTicketsTab/MyTicketsTab.module.css
@@ -86,7 +86,7 @@
   padding: 0 !important;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tableHeader {
     display: none;
   }
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_AddForm/AddForm.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_AddForm/AddForm.module.css
index 918d639d50..177fb07c02 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_AddForm/AddForm.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_AddForm/AddForm.module.css
@@ -91,7 +91,7 @@
   margin-left: 5px;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .addTitle {
     width: 634px;
   }
@@ -110,7 +110,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .addTitle {
     width: 355px;
     margin-bottom: 20px;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
index f46cba15ee..ee0aa29ce7 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsAdvanced/PurchaseTicketsAdvanced.module.css
@@ -93,7 +93,7 @@ label.infoLabel.expiry {
   padding: 0;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .infoGrid {
     grid-template-columns: repeat(4, max-content);
   }
@@ -108,7 +108,7 @@ label.infoLabel.expiry {
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .infoGrid {
     grid-template-columns: repeat(2, max-content);
   }
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
index 2284ce1320..5e9d9d9273 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_PurchaseTickets/PurchaseTicketsQuickBar/PurchaseTicketsQuickBar.module.css
@@ -68,7 +68,7 @@
   align-self: flex-end;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .quickBar {
     grid-template-columns: repeat(4, 1fr);
     grid-column-gap: 9px;
@@ -83,7 +83,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .quickBar {
     grid-template-columns: 103px 106px auto;
     grid-column-gap: 0;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePools.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePools.module.css
index 3c4b978482..af327d5e5b 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePools.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePools.module.css
@@ -140,7 +140,7 @@
   padding: 10px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .configuredVSP {
     width: 355px;
     height: 210px;
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
index 636eb62c2f..43808670e4 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_Tickets/Tickets.module.css
@@ -28,7 +28,7 @@
   align-self: flex-end;
   margin-right: 10px;
 }
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .purchaseTicketArea {
     width: 667px;
   }
@@ -36,7 +36,7 @@
     width: 675px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .purchaseTicketArea {
     width: 355px;
   }
diff --git a/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css b/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
index aad965ea11..cbe7b40730 100644
--- a/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/PurchaseTab.module.css
@@ -46,13 +46,13 @@
   justify-content: space-between;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .purchaseTicketArea {
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .purchaseTicketArea {
     width: 355px;
   }
diff --git a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
index 24d89eccfb..1daf202433 100644
--- a/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
+++ b/app/components/views/TicketsPage/PurchaseTab/StakeInfo/StakeInfo.module.css
@@ -129,7 +129,7 @@
   background-image: var(--ticket-voted);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .accordion {
     margin-bottom: 30px;
   }
diff --git a/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.module.css b/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.module.css
index 3990ae14f7..ed322da95d 100644
--- a/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.module.css
+++ b/app/components/views/TicketsPage/StakingTabWarning/StakingTabWarning.module.css
@@ -18,7 +18,7 @@
   color: var(--main-dark-blue);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .container {
     width: 35.5rem;
   }
diff --git a/app/components/views/TicketsPage/StatisticsTab/Statistics.module.css b/app/components/views/TicketsPage/StatisticsTab/Statistics.module.css
index 2b6533c994..92a1e1d5d9 100644
--- a/app/components/views/TicketsPage/StatisticsTab/Statistics.module.css
+++ b/app/components/views/TicketsPage/StatisticsTab/Statistics.module.css
@@ -125,12 +125,12 @@
   width: max-content;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .charts {
     width: 667px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .charts {
     padding-top: 20px;
     width: 355px;
diff --git a/app/components/views/TicketsPage/VSPTicketsStatusTab/MyTicketsTab.module.css b/app/components/views/TicketsPage/VSPTicketsStatusTab/MyTicketsTab.module.css
index 8e68696375..e6512fdb74 100644
--- a/app/components/views/TicketsPage/VSPTicketsStatusTab/MyTicketsTab.module.css
+++ b/app/components/views/TicketsPage/VSPTicketsStatusTab/MyTicketsTab.module.css
@@ -49,7 +49,7 @@
   margin-left: 4px;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .tableHeader {
     display: none;
   }
diff --git a/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css b/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
index 1badaa07e9..18210fd9a6 100644
--- a/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
+++ b/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
@@ -261,7 +261,7 @@
   align-items: center;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .rebroadcastBtnContainer,
   .revokeBtnContainer {
     width: 770px;
@@ -282,7 +282,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .buttonContainer {
     display: flex;
     flex-direction: column-reverse;
diff --git a/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.module.css b/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.module.css
index 44d74648e1..5f05239991 100644
--- a/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.module.css
+++ b/app/components/views/TransactionPage/TransactionHeader/TransactionHeader.module.css
@@ -34,7 +34,7 @@
 .thinButton {
   padding: 5px 20px 5px 20px !important;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .standalonePage .subtitle {
     margin-top: 10px;
     width: 355px;
diff --git a/app/components/views/TransactionPage/TransactionPage.module.css b/app/components/views/TransactionPage/TransactionPage.module.css
index 78468c7267..47f3b9086a 100644
--- a/app/components/views/TransactionPage/TransactionPage.module.css
+++ b/app/components/views/TransactionPage/TransactionPage.module.css
@@ -6,7 +6,7 @@
   padding: 0;
   top: 157px;
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .standalonePage > div:first-child {
     padding-bottom: 10px;
   }
diff --git a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.module.css b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.module.css
index 67d01d8da2..cfd6acce5c 100644
--- a/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.module.css
+++ b/app/components/views/TransactionsPage/ExportTab/ExportPage/ExportPage.module.css
@@ -89,7 +89,7 @@ ul.exportInfoFields {
   text-align: right;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .exportAreaLeft {
     width: 388px;
   }
@@ -103,7 +103,7 @@ ul.exportInfoFields {
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .modal {
     width: 350px !important;
   }
diff --git a/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.module.css b/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.module.css
index 3a290a9e92..9bacba72d5 100644
--- a/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.module.css
+++ b/app/components/views/TransactionsPage/HistoryTab/HistoryPage/HistoryPage.module.css
@@ -29,13 +29,13 @@
   width: max-content;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .historyPageContent {
     width: 667px;
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .historyPageContent {
     width: 355px;
   }
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
index 3c64c37389..67c41615c3 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
@@ -125,7 +125,7 @@
   color: var(--grey-7);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .receiveContent {
     width: 355px;
     padding: 20px 20px;
diff --git a/app/components/views/TransactionsPage/SendTab/SendForm.module.css b/app/components/views/TransactionsPage/SendTab/SendForm.module.css
index d47287e4e8..1799722298 100644
--- a/app/components/views/TransactionsPage/SendTab/SendForm.module.css
+++ b/app/components/views/TransactionsPage/SendTab/SendForm.module.css
@@ -76,7 +76,7 @@
   color: var(--input-color-default);
 }
 
-@media screen and (max-width: 1180px) {
+@media (--lg-viewport) {
   .sendArea {
     width: 667px;
   }
@@ -88,7 +88,7 @@
   }
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .isRow.sendArea {
     flex-direction: column;
     height: auto;
diff --git a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
index 4375f98087..60d2631718 100644
--- a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
+++ b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
@@ -144,7 +144,7 @@
   opacity: 0.85;
 }
 
-@media screen and (max-width: 1180px) {
+@media (--bg-viewport) {
   .amountContainer .sendInputWrapper {
     width: 185px;
   }
@@ -156,7 +156,7 @@
     width: 301px;
   }
 }
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .sendOutputContainer {
     padding: 0;
     margin: 10px;
diff --git a/app/components/views/TutorialsPage/PagedTutorial/PagedTutorial.module.css b/app/components/views/TutorialsPage/PagedTutorial/PagedTutorial.module.css
index 607942c0e2..5cf0214b04 100644
--- a/app/components/views/TutorialsPage/PagedTutorial/PagedTutorial.module.css
+++ b/app/components/views/TutorialsPage/PagedTutorial/PagedTutorial.module.css
@@ -27,7 +27,7 @@
   color: var(--new-wallet-label);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .closeButton {
     top: 30px;
     right: 30px;
diff --git a/app/components/views/TutorialsPage/StandardPage/StandardPage.module.css b/app/components/views/TutorialsPage/StandardPage/StandardPage.module.css
index a8f145a3b0..a0ae0e5a7f 100644
--- a/app/components/views/TutorialsPage/StandardPage/StandardPage.module.css
+++ b/app/components/views/TutorialsPage/StandardPage/StandardPage.module.css
@@ -60,7 +60,7 @@
   color: var(--wallet-tutorial-link);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .standardPage {
     flex-direction: column;
   }
diff --git a/app/components/views/TutorialsPage/TutorialsPage.module.css b/app/components/views/TutorialsPage/TutorialsPage.module.css
index 171219f59d..6f8a4d557d 100644
--- a/app/components/views/TutorialsPage/TutorialsPage.module.css
+++ b/app/components/views/TutorialsPage/TutorialsPage.module.css
@@ -4,7 +4,7 @@
   color: var(--title-text-and-button-background);
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .walletTutorial {
     padding: 30px 20px 30px 0;
   }
diff --git a/app/containers/Wallet/Wallet.module.css b/app/containers/Wallet/Wallet.module.css
index 52d9c9bd8e..65bcea9d6d 100644
--- a/app/containers/Wallet/Wallet.module.css
+++ b/app/containers/Wallet/Wallet.module.css
@@ -20,7 +20,7 @@
   overflow-x: hidden;
 }
 
-@media screen and (max-width: 768px) {
+@media (--sm-viewport) {
   .pageView {
     width: 100%;
   }
diff --git a/package.json b/package.json
index c8adc67a39..94763b108e 100644
--- a/package.json
+++ b/package.json
@@ -292,6 +292,9 @@
     "mv": "^2.1.1",
     "node-polyfill-webpack-plugin": "^1.1.0",
     "pi-ui": "https://github.com/decred/pi-ui",
+    "postcss": "^8.4.16",
+    "postcss-loader": "^7.0.1",
+    "postcss-preset-env": "^7.8.0",
     "prop-types": "^15.7.2",
     "qr-image": "^3.2.0",
     "qrcode": "^1.4.4",
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000000..e0b02970d0
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,12 @@
+module.exports = {
+  plugins: [
+    [
+      "postcss-preset-env",
+      {
+        // When developing with an installed `pi-ui`
+        // Point the importFrom to the path of the package in your node_modules
+        importFrom: "./node_modules/pi-ui/dist/exports.css"
+      }
+    ]
+  ]
+};
diff --git a/webpack/ui.dev.js b/webpack/ui.dev.js
index efdcf18b04..5daa13a937 100644
--- a/webpack/ui.dev.js
+++ b/webpack/ui.dev.js
@@ -43,6 +43,14 @@ module.exports = merge(baseConfig, {
                 localIdentName: "[local]__[hash:base64:5]"
               }
             }
+          },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                config: "./postcss.config.js"
+              }
+            }
           }
         ],
         include: /\.module\.css$/
@@ -80,7 +88,7 @@ module.exports = merge(baseConfig, {
     new webpack.HotModuleReplacementPlugin(),
 
     new webpack.DefinePlugin({
-      "__ELECTRON_ENV": JSON.stringify("renderer")
+      __ELECTRON_ENV: JSON.stringify("renderer")
     }),
 
     new webpack.LoaderOptionsPlugin({
@@ -89,8 +97,8 @@ module.exports = merge(baseConfig, {
 
     new CopyWebpackPlugin({
       patterns: [
-          // Copy the generated trezor iframe and code.
-          { from: "./app/dist-trezor", to: "" }
+        // Copy the generated trezor iframe and code.
+        { from: "./app/dist-trezor", to: "" }
       ]
     }),
 
@@ -104,5 +112,16 @@ module.exports = merge(baseConfig, {
       template: "app/staticPages/confirmation-dialog.html",
       inject: false
     })
+  ],
+  // Uncomment to see postcss-loader warnings
+  // TODO: Remove when the new solution is implemented and warning is removed
+  // ignore: postcss-custom-properties: "importFrom" and "exportTo" will be removed in a future version of postcss-custom-properties.
+  // We are looking for insights and anecdotes on how these features are used so that we can design the best alternative.
+  // Please let us know if our proposal will work for you.
+  // Visit the discussion on github for more details. https://github.com/csstools/postcss-plugins/discussions/192
+  ignoreWarnings: [
+    {
+      module: /postcss-loader\/dist\/cjs\.js/
+    }
   ]
 });
diff --git a/webpack/ui.prod.js b/webpack/ui.prod.js
index a9f09f9dac..363318e318 100644
--- a/webpack/ui.prod.js
+++ b/webpack/ui.prod.js
@@ -27,7 +27,18 @@ module.exports = merge(baseConfig, {
     rules: [
       {
         test: /\.css$/,
-        use: [{ loader: MiniCssExtractPlugin.loader }, "css-loader"]
+        use: [
+          { loader: MiniCssExtractPlugin.loader },
+          "css-loader",
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                config: "./postcss.config.js"
+              }
+            }
+          }
+        ]
       }
     ]
   },
@@ -37,8 +48,8 @@ module.exports = merge(baseConfig, {
 
     new CopyWebpackPlugin({
       patterns: [
-          // Copy the generated trezor iframe and code.
-          { from: "./app/dist-trezor", to: "" }
+        // Copy the generated trezor iframe and code.
+        { from: "./app/dist-trezor", to: "" }
       ]
     }),
 
@@ -54,7 +65,7 @@ module.exports = merge(baseConfig, {
     }),
 
     new webpack.DefinePlugin({
-      "__ELECTRON_ENV": JSON.stringify("renderer")
+      __ELECTRON_ENV: JSON.stringify("renderer")
     })
   ],
 
@@ -63,7 +74,6 @@ module.exports = merge(baseConfig, {
     __dirname: true
   },
 
-
   optimization: {
     minimizer: [
       new TerserPlugin({
diff --git a/yarn.lock b/yarn.lock
index ee82eb6edb..5a9693ab73 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -176,6 +176,13 @@
   dependencies:
     "@babel/types" "^7.13.12"
 
+"@babel/helper-module-imports@^7.16.7":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.18.6.tgz#1e3ebdbbd08aad1437b428c50204db13c5a3ca6e"
+  integrity sha512-0NFvs3VkuSYbFi1x2Vd6tKrywq+z/cLeYC/RJNFrIX/30Bf5aiGYbtvGXolEktzJH8o5E5KJ3tT+nkxuuZFVlA==
+  dependencies:
+    "@babel/types" "^7.18.6"
+
 "@babel/helper-module-transforms@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.13.0.tgz#42eb4bd8eea68bab46751212c357bfed8b40f6f1"
@@ -203,6 +210,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.18.6":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f"
+  integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w==
+
 "@babel/helper-remap-async-to-generator@^7.13.0":
   version "7.13.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.13.0.tgz#376a760d9f7b4b2077a9dd05aa9c3927cadb2209"
@@ -243,6 +255,11 @@
   dependencies:
     "@babel/types" "^7.12.13"
 
+"@babel/helper-string-parser@^7.18.10":
+  version "7.18.10"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
+  integrity sha512-XtIfWmeNY3i4t7t4D2t02q50HvqHybPqW2ki1kosnvWCwuCMeo81Jf0gwr85jy/neUdg5XDdeFE/80DXiO+njw==
+
 "@babel/helper-validator-identifier@^7.12.11":
   version "7.14.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.0.tgz#d26cad8a47c65286b15df1547319a5d0bcf27288"
@@ -253,6 +270,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz#220df993bfe904a4a6b02ab4f3385a5ebf6e2389"
   integrity sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w==
 
+"@babel/helper-validator-identifier@^7.18.6":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
+  integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
+
 "@babel/helper-validator-option@^7.12.17":
   version "7.12.17"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz#d1fbf012e1a79b7eebbfdc6d270baaf8d9eb9831"
@@ -557,6 +579,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
+"@babel/plugin-syntax-jsx@^7.17.12":
+  version "7.18.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz#a8feef63b010150abd97f1649ec296e849943ca0"
+  integrity sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.18.6"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -1047,7 +1076,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.8.7":
   version "7.16.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.3.tgz#b86f0db02a04187a3c17caa77de69840165d42d5"
   integrity sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==
@@ -1061,6 +1090,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.18.3":
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
+  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.12.13", "@babel/template@^7.3.3":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327"
@@ -1101,6 +1137,15 @@
     "@babel/helper-validator-identifier" "^7.15.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.18.6":
+  version "7.18.13"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.18.13.tgz#30aeb9e514f4100f7c1cb6e5ba472b30e48f519a"
+  integrity sha512-ePqfTihzW0W6XAU+aMw2ykilisStJfDnsejDCXRchCcMJ4O0+8DhPXf2YUbZ6wjBlsEmZwLK/sPweWtu8hcJYQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.18.10"
+    "@babel/helper-validator-identifier" "^7.18.6"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -1114,6 +1159,112 @@
     exec-sh "^0.3.2"
     minimist "^1.2.0"
 
+"@csstools/postcss-cascade-layers@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-cascade-layers/-/postcss-cascade-layers-1.0.5.tgz#f16f2c4396ace855541e1aa693f5f27ec972e6ad"
+  integrity sha512-Id/9wBT7FkgFzdEpiEWrsVd4ltDxN0rI0QS0SChbeQiSuux3z21SJCRLu6h2cvCEUmaRi+VD0mHFj+GJD4GFnw==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.2"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-color-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.1.tgz#2bd36ab34f82d0497cfacdc9b18d34b5e6f64b6b"
+  integrity sha512-Bc0f62WmHdtRDjf5f3e2STwRAl89N2CLb+9iAwzrv4L2hncrbDwnQD9PCq0gtAt7pOI2leIV08HIBUd4jxD8cw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-font-format-keywords@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-font-format-keywords/-/postcss-font-format-keywords-1.0.1.tgz#677b34e9e88ae997a67283311657973150e8b16a"
+  integrity sha512-ZgrlzuUAjXIOc2JueK0X5sZDjCtgimVp/O5CEqTcs5ShWBa6smhWYbS0x5cVc/+rycTDbjjzoP0KTDnUneZGOg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-hwb-function@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-hwb-function/-/postcss-hwb-function-1.0.2.tgz#ab54a9fce0ac102c754854769962f2422ae8aa8b"
+  integrity sha512-YHdEru4o3Rsbjmu6vHy4UKOXZD+Rn2zmkAmLRfPet6+Jz4Ojw8cbWxe1n42VaXQhD3CQUXXTooIy8OkVbUcL+w==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-ic-unit@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-ic-unit/-/postcss-ic-unit-1.0.1.tgz#28237d812a124d1a16a5acc5c3832b040b303e58"
+  integrity sha512-Ot1rcwRAaRHNKC9tAqoqNZhjdYBzKk1POgWfhN4uCOE47ebGcLRqXjKkApVDpjifL6u2/55ekkpnFcp+s/OZUw==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-is-pseudo-class@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.7.tgz#846ae6c0d5a1eaa878fce352c544f9c295509cd1"
+  integrity sha512-7JPeVVZHd+jxYdULl87lvjgvWldYu+Bc62s9vD/ED6/QTGjy0jy0US/f6BG53sVMTBJ1lzKZFpYmofBN9eaRiA==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+"@csstools/postcss-nested-calc@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-nested-calc/-/postcss-nested-calc-1.0.0.tgz#d7e9d1d0d3d15cf5ac891b16028af2a1044d0c26"
+  integrity sha512-JCsQsw1wjYwv1bJmgjKSoZNvf7R6+wuHDAbi5f/7MbFhl2d/+v+TvBTU4BJH3G1X1H87dHl0mh6TfYogbT/dJQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-normalize-display-values@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-normalize-display-values/-/postcss-normalize-display-values-1.0.1.tgz#15da54a36e867b3ac5163ee12c1d7f82d4d612c3"
+  integrity sha512-jcOanIbv55OFKQ3sYeFD/T0Ti7AMXc9nM1hZWu8m/2722gOTxFg7xYu4RDLJLeZmPUVQlGzo4jhzvTUq3x4ZUw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-oklab-function@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.1.tgz#88cee0fbc8d6df27079ebd2fa016ee261eecf844"
+  integrity sha512-nJpJgsdA3dA9y5pgyb/UfEzE7W5Ka7u0CX0/HIMVBNWzWemdcTH3XwANECU6anWv/ao4vVNLTMxhiPNZsTK6iA==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-progressive-custom-properties@^1.1.0", "@csstools/postcss-progressive-custom-properties@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz#542292558384361776b45c85226b9a3a34f276fa"
+  integrity sha512-ASA9W1aIy5ygskZYuWams4BzafD12ULvSypmaLJT2jvQ8G0M3I8PRQhC0h7mG0Z3LI05+agZjqSR9+K9yaQQjA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-stepped-value-functions@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-stepped-value-functions/-/postcss-stepped-value-functions-1.0.1.tgz#f8772c3681cc2befed695e2b0b1d68e22f08c4f4"
+  integrity sha512-dz0LNoo3ijpTOQqEJLY8nyaapl6umbmDcgj4AD0lgVQ572b2eqA1iGZYTTWhrcrHztWDDRAX2DGYyw2VBjvCvQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-text-decoration-shorthand@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-text-decoration-shorthand/-/postcss-text-decoration-shorthand-1.0.0.tgz#ea96cfbc87d921eca914d3ad29340d9bcc4c953f"
+  integrity sha512-c1XwKJ2eMIWrzQenN0XbcfzckOLLJiczqy+YvfGmzoVXd7pT9FfObiSEfzs84bpE/VqfpEuAZ9tCRbZkZxxbdw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-trigonometric-functions@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-trigonometric-functions/-/postcss-trigonometric-functions-1.0.2.tgz#94d3e4774c36d35dcdc88ce091336cb770d32756"
+  integrity sha512-woKaLO///4bb+zZC2s80l+7cm07M7268MsyG3M0ActXXEFi6SuhvriQYcb58iiKGbjwwIU7n45iRLEHypB47Og==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+"@csstools/postcss-unset-value@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/postcss-unset-value/-/postcss-unset-value-1.0.2.tgz#c99bb70e2cdc7312948d1eb41df2412330b81f77"
+  integrity sha512-c8J4roPBILnelAsdLr4XOAR/GsTm0GJi4XpcfvoWk3U6KiTCqiFYc63KhRMQQX35jYMp4Ao8Ij9+IZRgMfJp1g==
+
+"@csstools/selector-specificity@^2.0.0", "@csstools/selector-specificity@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.2.tgz#1bfafe4b7ed0f3e4105837e056e0a89b108ebe36"
+  integrity sha512-IkpVW/ehM1hWKln4fCA3NzJU8KwD+kIOvPZA4cqxoJHtE21CCzjyp+Kxbu0i5I4tBNOlXPL9mjwnWlL0VEG4Fg==
+
 "@develar/schema-utils@~2.6.5":
   version "2.6.5"
   resolved "https://registry.yarnpkg.com/@develar/schema-utils/-/schema-utils-2.6.5.tgz#3ece22c5838402419a6e0425f85742b961d9b6c6"
@@ -1154,7 +1305,36 @@
     dir-compare "^2.4.0"
     fs-extra "^9.0.1"
 
-"@emotion/cache@^11.4.0", "@emotion/cache@^11.6.0":
+"@emotion/babel-plugin@^11.10.0":
+  version "11.10.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.10.2.tgz#879db80ba622b3f6076917a1e6f648b1c7d008c7"
+  integrity sha512-xNQ57njWTFVfPAc3cjfuaPdsgLp5QOSuRsj9MA6ndEhH/AzuZM86qIQzt6rq+aGBwj3n5/TkLmU5lhAfdRmogA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/plugin-syntax-jsx" "^7.17.12"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/serialize" "^1.1.0"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.10.0":
+  version "11.10.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.10.3.tgz#c4f67904fad10c945fea5165c3a5a0583c164b87"
+  integrity sha512-Psmp/7ovAa8appWh3g51goxu/z3iVms7JXOreq136D8Bbn6dYraPnmL6mdM8GThEx9vwSn92Fz+mGSjBzN8UPQ==
+  dependencies:
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/sheet" "^1.2.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
+    stylis "4.0.13"
+
+"@emotion/cache@^11.4.0":
   version "11.6.0"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.6.0.tgz#65fbdbbe4382f1991d8b20853c38e63ecccec9a1"
   integrity sha512-ElbsWY1KMwEowkv42vGo0UPuLgtPYfIs9BxxVrmvsaJVvktknsHYYlx5NQ5g6zLDcOTyamlDc7FkRg2TAcQDKQ==
@@ -1165,38 +1345,43 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "^4.0.10"
 
-"@emotion/hash@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
-  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+"@emotion/hash@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.0.tgz#c5153d50401ee3c027a57a177bc269b16d889cb7"
+  integrity sha512-14FtKiHhy2QoPIzdTcvh//8OyBlknNs2nXRwIhG904opCby3l+9Xaf/wuPvICBF0rc1ZCNBd3nKe9cd2mecVkQ==
 
 "@emotion/memoize@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
 
-"@emotion/react@^11.1.1":
-  version "11.7.0"
-  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.0.tgz#b179da970ac0e8415de3ac165deadf8d9c4bf89f"
-  integrity sha512-WL93hf9+/2s3cA1JVJlz8+Uy6p6QWukqQFOm2OZO5ki51hfucHMOmbSjiyC3t2Y4RI8XUmBoepoc/24ny/VBbA==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@emotion/cache" "^11.6.0"
-    "@emotion/serialize" "^1.0.2"
-    "@emotion/sheet" "^1.1.0"
-    "@emotion/utils" "^1.0.0"
-    "@emotion/weak-memoize" "^0.2.5"
+"@emotion/memoize@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f"
+  integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==
+
+"@emotion/react@^11.8.1":
+  version "11.10.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.0.tgz#53c577f063f26493f68a05188fb87528d912ff2e"
+  integrity sha512-K6z9zlHxxBXwN8TcpwBKcEsBsOw4JWCCmR+BeeOWgqp8GIU1yA2Odd41bwdAAr0ssbQrbJbVnndvv7oiv1bZeQ==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.10.0"
+    "@emotion/cache" "^11.10.0"
+    "@emotion/serialize" "^1.1.0"
+    "@emotion/utils" "^1.2.0"
+    "@emotion/weak-memoize" "^0.3.0"
     hoist-non-react-statics "^3.3.1"
 
-"@emotion/serialize@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
-  integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
+"@emotion/serialize@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.1.0.tgz#b1f97b1011b09346a40e9796c37a3397b4ea8ea8"
+  integrity sha512-F1ZZZW51T/fx+wKbVlwsfchr5q97iW8brAnXmsskz4d0hVB4O3M/SiA3SaeH06x02lSNzkkQv+n3AX3kCXKSFA==
   dependencies:
-    "@emotion/hash" "^0.8.0"
-    "@emotion/memoize" "^0.7.4"
-    "@emotion/unitless" "^0.7.5"
-    "@emotion/utils" "^1.0.0"
+    "@emotion/hash" "^0.9.0"
+    "@emotion/memoize" "^0.8.0"
+    "@emotion/unitless" "^0.8.0"
+    "@emotion/utils" "^1.2.0"
     csstype "^3.0.2"
 
 "@emotion/sheet@^1.1.0":
@@ -1204,21 +1389,36 @@
   resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
   integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
 
-"@emotion/unitless@^0.7.5":
-  version "0.7.5"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
-  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+"@emotion/sheet@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.0.tgz#771b1987855839e214fc1741bde43089397f7be5"
+  integrity sha512-OiTkRgpxescko+M51tZsMq7Puu/KP55wMT8BgpcXVG2hqXc0Vo0mfymJ/Uj24Hp0i083ji/o0aLddh08UEjq8w==
+
+"@emotion/unitless@^0.8.0":
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.8.0.tgz#a4a36e9cbdc6903737cd20d38033241e1b8833db"
+  integrity sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==
 
 "@emotion/utils@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
+"@emotion/utils@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.2.0.tgz#9716eaccbc6b5ded2ea5a90d65562609aab0f561"
+  integrity sha512-sn3WH53Kzpw8oQ5mgMmIzzyAaH2ZqFEbozVVBSYp538E06OSE6ytOp7pRAjNQR+Q/orwqdQYJSe2m3hCOeznkw==
+
 "@emotion/weak-memoize@^0.2.5":
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
   integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
 
+"@emotion/weak-memoize@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz#ea89004119dc42db2e1dba0f97d553f7372f6fcb"
+  integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg==
+
 "@eslint/eslintrc@^0.4.0":
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.0.tgz#99cc0a0584d72f1df38b900fb062ba995f395547"
@@ -1654,90 +1854,91 @@
   resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570"
   integrity sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==
 
-"@react-spring/animated@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.3.0.tgz#294f7696e450c4ae3abd2b59a6dd08bf70b53d3f"
-  integrity sha512-QvuyW77eDvLhdJyO6FFldlWlvnuKK2cpOx4+Zr962RyT/0IO1tbNDRO6G1vM8va6mbv6tmfYmRGKmKYePN3kVg==
-  dependencies:
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/core@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.3.0.tgz#2d0534c5b53c7e39b8e9ed3d996502828c90f4d4"
-  integrity sha512-SZQOIX7wkIagmucAi7zxqGGIb9A60o9n5922UrWo8Kl3FdG7FgrNwqr0kOI43/pMFeL70/PXwFhBatB03N5ctw==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/konva@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.3.0.tgz#97b23b2f235a9805d39279a0a1027c7d9646d6fb"
-  integrity sha512-lyUWxzEateE6Qxpc81oxJb5yiNDdj36Q9R9euJAgjl2dvUDaX85rVGqaB25+72yA1iQg5I4Kymj3UZVvPthRlA==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/native@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.3.0.tgz#6fee1ccaa8d70a19c239b27e95bcc050776f1725"
-  integrity sha512-lvKV5qxqnE5AMtTHv8xwAocGED4+VRxpljwBl1lbtileq3WnvOn7CpMLZNGc5TXjLWAE3zfoNJui69/jE/3uSw==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/rafz@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.3.0.tgz#e791c0ae854f7c1a512ae87f34fff36934d82d29"
-  integrity sha512-FD04d2TNb3xOZ6+04qwDmC3d0H4X6gvhsxU71/nSm4PPYRqFzZEolcVPmrHlbGzco3bvXKI+Kp2pIrpXLPUJFA==
-
-"@react-spring/shared@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.3.0.tgz#7b4393094a97a1384f74fd8088e0b896e8f0c411"
-  integrity sha512-7ZFY2Blu/wxbLGcYvQavyLUVi9bK/is1bsn11qZ9AaZb4iucRyIf2jgjBfKZFCq4qgi7S/7QmDQG7sucUyLELg==
-  dependencies:
-    "@react-spring/rafz" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/three@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.3.0.tgz#e3fc49de1411eb1a7aa937fec8db33252f11d294"
-  integrity sha512-RKMXXdcNK0nbwLbmle/0KT/idGGpOxvI5lT1KtN8R3cgJWQBKYWVtzg+B/RgmQVNxO/QNlsKGWTjURockTRSVQ==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/types@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.3.0.tgz#54ec58ca40414984209c8baa75fddd394f9e2949"
-  integrity sha512-q4cDr2RSPblXMD3Rxvk6qcC7nmhhfV2izEBP06hb8ZCXznA6qJirG3RMpi29kBtEQiw1lWR59hAXKhauaPtbOA==
-
-"@react-spring/web@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.3.0.tgz#48d1ebdd1d484065e0a943dbbb343af259496427"
-  integrity sha512-OTAGKRdyz6fLRR1tABFyw9KMpytyATIndQrj0O6RG47GfjiInpf4+WZKxo763vpS7z1OlnkI81WLUm/sqOqAnA==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
-
-"@react-spring/zdog@~9.3.0":
-  version "9.3.0"
-  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.3.0.tgz#d84b69375017d864514ebcf59511731c5cc0280f"
-  integrity sha512-JOQwtg/MQ6sWwmKNY4w/R1TVXohIUkrbSgDfgUEK45ERTDwZGZzIo9QbqHv4dwEBK4Wa2Hfrcdf8cnEaNNzdAQ==
-  dependencies:
-    "@react-spring/animated" "~9.3.0"
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/shared" "~9.3.0"
-    "@react-spring/types" "~9.3.0"
+"@react-spring/animated@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.5.2.tgz#42785b4f369d9715e9ee32c04b78483e7bb85489"
+  integrity sha512-oRlX+MmYLbK8IuUZR7SQUnRjXxJ4PMIZeBkBd1SUWVgVJAHMTfJzPltzm+I6p59qX+qLlklYHfnWaonQKDqLuQ==
+  dependencies:
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/core@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.5.2.tgz#c8450783ce87a82d3f9ab21e2650e42922398ff7"
+  integrity sha512-UMRtFH6EfebMp/NMDGCUY5+hZFXsg9iT9hzt/iPzJSz2WMXKBjLoFZHJXcmiVOrIhzHmg1O0pFECn1Wp6pZ5Gw==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/rafz" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/konva@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/konva/-/konva-9.5.2.tgz#cbc7c75c55c7946481f86c7392a6656bb5b1bf4a"
+  integrity sha512-FN8LpbGQtm2pllU9mOyYjYwvLtA9EiIPWk2NVuhhX+5lJZrdCWuEY7EyFpK8PtgZXBdVj8bj7eIu1LlTnARW/A==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/native@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/native/-/native-9.5.2.tgz#218fa228a746cb2f535ea59b317d2e99cdfed02d"
+  integrity sha512-G9BCAKVADLweLR43uyMnTrOnYDb4BboYvqKY+0X1fLs45PNrfbBXnSLot4g+5x3HjblypJgNq7CjHlqZKI980g==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/rafz@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/rafz/-/rafz-9.5.2.tgz#1264d5df09717cf46d55055da2c55ff84f59073f"
+  integrity sha512-xHSRXKKBI/wDUkZGrspkOm4VlgN6lZi8Tw9Jzibp9QKf3neoof+U2mDNgklvnLaasymtUwAq9o4ZfFvQIVNgPQ==
+
+"@react-spring/shared@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.5.2.tgz#e0a252e06daa3927964460fef05d8092e7d78ffc"
+  integrity sha512-/OSf2sjwY4BUnjZL6xMC+H3WxOOhMUCk+yZwgdj40XuyUpk6E6tYyiPeD9Yq5GLsZHodkvE1syVMRVReL4ndAg==
+  dependencies:
+    "@react-spring/rafz" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/three@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/three/-/three-9.5.2.tgz#965ff4e729929ebbb9a1f8e84f3f4acb6acec4f9"
+  integrity sha512-3H7Lv8BJZ3dajh0yJA3m9rEbqz5ZNrTCAkhVOeLqgvBlcWU5qVs4luYA1Z7H4vZnLqVtzv+kHAyg3XIpuTOXhQ==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/types@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/types/-/types-9.5.2.tgz#cce1b03afbafb23edfb9cd8c517cc7462abffb65"
+  integrity sha512-n/wBRSHPqTmEd4BFWY6TeR1o/UY+3ujoqMxLjqy90CcY/ozJzDRuREL3c+pxMeTF2+B7dX33dTPCtFMX51nbxg==
+
+"@react-spring/web@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.5.2.tgz#762ee6b3c8fea40281e1298f5cf1c0515ad6a794"
+  integrity sha512-cusTjbOGTgtbsnpBDjb6Ia+B0lQLE0Fk5rGDog6Sww7hWnLIQ521PMiOBnAWtkntB9eXDUfj7L91nwJviEC0lw==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
+
+"@react-spring/zdog@~9.5.2":
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/@react-spring/zdog/-/zdog-9.5.2.tgz#a3e451378c23caa4381b5821d3d52c3017740c55"
+  integrity sha512-zUX8RzX8gM51g8NJ5Qaf15KNKQgN3qN/8m5FvqmiqZ5ZGqjoHkbCoMD3o2MICTUN1l+d4eUu9TYrmiO2bgJo/g==
+  dependencies:
+    "@react-spring/animated" "~9.5.2"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/shared" "~9.5.2"
+    "@react-spring/types" "~9.5.2"
 
 "@sheerun/mutationobserver-shim@^0.3.2":
   version "0.3.3"
@@ -2970,6 +3171,18 @@ atomically@^1.7.0:
   resolved "https://registry.yarnpkg.com/atomically/-/atomically-1.7.0.tgz#c07a0458432ea6dbc9a3506fffa424b48bccaafe"
   integrity sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w==
 
+autoprefixer@^10.4.8:
+  version "10.4.8"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.8.tgz#92c7a0199e1cfb2ad5d9427bd585a3d75895b9e5"
+  integrity sha512-75Jr6Q/XpTqEf6D2ltS5uMewJIx5irCU1oBYJrWjFenq/m12WRRrz6g15L1EIoYvPLXTbEry7rDOwrcYNj77xw==
+  dependencies:
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001373"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
 autoprefixer@^9.8.6:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -3047,6 +3260,15 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
 babel-plugin-module-resolver@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-module-resolver/-/babel-plugin-module-resolver-4.1.0.tgz#22a4f32f7441727ec1fbf4967b863e1e3e9f33e2"
@@ -3435,6 +3657,16 @@ browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4.16.3:
     escalade "^3.1.1"
     node-releases "^1.1.71"
 
+browserslist@^4.21.3:
+  version "4.21.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.3.tgz#5df277694eb3c48bc5c4b05af3e8b7e09c5a6d1a"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
 bs58@^4.0.0, bs58@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bs58/-/bs58-4.0.1.tgz#be161e76c354f6f788ae4071f63f34e8c4f0a42a"
@@ -3685,6 +3917,11 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa"
   integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A==
 
+caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
+  version "1.0.30001388"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001388.tgz#88e01f4591cbd81f9f665f3f078c66b509fbe55d"
+  integrity sha512-znVbq4OUjqgLxMxoNX2ZeeLR0d7lcDiE5uJ4eUiWdml1J1EkxbnQq6opT9jb9SMfJxB0XA16/ziHwni4u1I3GQ==
+
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -4156,6 +4393,13 @@ convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   dependencies:
     safe-buffer "~5.1.1"
 
+convert-source-map@^1.5.0:
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
+  integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
+  dependencies:
+    safe-buffer "~5.1.1"
+
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
@@ -4327,6 +4571,20 @@ crypto-random-string@^2.0.0:
   resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5"
   integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA==
 
+css-blank-pseudo@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/css-blank-pseudo/-/css-blank-pseudo-3.0.3.tgz#36523b01c12a25d812df343a32c322d2a2324561"
+  integrity sha512-VS90XWtsHGqoM0t4KpH053c4ehxZ2E6HtGI7x68YFV0pTo/QmkV/YFA+NnlvK8guxZVNWGQhVNJGC39Q8XF4OQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+css-has-pseudo@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/css-has-pseudo/-/css-has-pseudo-3.0.4.tgz#57f6be91ca242d5c9020ee3e51bbb5b89fc7af73"
+  integrity sha512-Vse0xpR1K9MNlp2j5w1pgWIJtm1a8qS0JwS9goFYcImjlHEmywP9VUF05aGBXzGpDJF86QXk4L0ypBmwPhGArw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
 css-loader@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-5.2.0.tgz#a9ecda190500863673ce4434033710404efbff00"
@@ -4345,6 +4603,11 @@ css-loader@^5.2.0:
     schema-utils "^3.0.0"
     semver "^7.3.4"
 
+css-prefers-color-scheme@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-6.0.3.tgz#ca8a22e5992c10a5b9d315155e7caee625903349"
+  integrity sha512-4BqMbZksRkJQx2zAjrokiGMd07RqOa2IxIrrN10lyBe9xhn9DEvjUK79J6jkeiv9D9hQFXKb6g1jwU62jziJZA==
+
 css-select@^2.0.2:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-2.1.0.tgz#6a34653356635934a81baca68d0255432105dbef"
@@ -4395,6 +4658,11 @@ css@^2.2.3:
     source-map-resolve "^0.5.2"
     urix "^0.1.0"
 
+cssdb@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/cssdb/-/cssdb-7.0.1.tgz#3810a0c67ae06362982dfe965dbedf57a0f26617"
+  integrity sha512-pT3nzyGM78poCKLAEy2zWIVX2hikq6dIrjuZzLV98MumBg+xMTNYfHx7paUlfiRTgg91O/vR889CIf+qiv79Rw==
+
 cssesc@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
@@ -5141,6 +5409,11 @@ electron-to-chromium@^1.3.723:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.737.tgz#196f2e9656f4f3c31930750e1899c091b72d36b5"
   integrity sha512-P/B84AgUSQXaum7a8m11HUsYL8tj9h/Pt5f7Hg7Ty6bm5DxlFq+e5+ouHUoNQMsKDJ7u4yGfI8mOErCmSH9wyg==
 
+electron-to-chromium@^1.4.202:
+  version "1.4.241"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.241.tgz#5aa03ab94db590d8269f4518157c24b1efad34d6"
+  integrity sha512-e7Wsh4ilaioBZ5bMm6+F4V5c11dh56/5Jwz7Hl5Tu1J7cnB+Pqx5qIF2iC7HPpfyQMqGSvvLP5bBAIDd2gAtGw==
+
 electron@17.4.2:
   version "17.4.2"
   resolved "https://registry.yarnpkg.com/electron/-/electron-17.4.2.tgz#fb5226100fc3f5d6e319ccad7fa462bf15ee0d94"
@@ -5927,6 +6200,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-3.0.0.tgz#49169f1d7993430646da61ecc5ae355c21c97b73"
@@ -5993,6 +6271,11 @@ forwarded@~0.1.2:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
   integrity sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=
 
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fragment-cache/-/fragment-cache-0.2.1.tgz#4290fad27f13e89be7f33799c6bc5a0abfff0d19"
@@ -8099,6 +8382,11 @@ kleur@^3.0.3:
   resolved "https://registry.yarnpkg.com/kleur/-/kleur-3.0.3.tgz#a79c9ecc86ee1ce3fa6206d1216c501f147fc07e"
   integrity sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==
 
+klona@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
+  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+
 known-css-properties@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d"
@@ -8985,6 +9273,11 @@ nanoid@^3.1.23:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.2.0.tgz#62667522da6673971cca916a6d3eff3f415ff80c"
   integrity sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -9220,6 +9513,11 @@ node-releases@^1.1.71:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.72.tgz#14802ab6b1039a79a0c7d662b610a5bbd76eacbe"
   integrity sha512-LLUo+PpH3dU6XizX3iVoubUNheF/owjXCZZ5yACDxNnPtgFuludV1ZL3ayK1kVep42Rmm0+R9/Y60NQbZ2bifw==
 
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
 node-source-walk@^4.0.0, node-source-walk@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-4.2.0.tgz#c2efe731ea8ba9c03c562aa0a9d984e54f27bc2c"
@@ -9801,16 +10099,21 @@ performance-now@^2.1.0:
 
 "pi-ui@https://github.com/decred/pi-ui":
   version "1.0.0"
-  resolved "https://github.com/decred/pi-ui#94c66bab5963ee5456d617ae093b4abbb043e31a"
+  resolved "https://github.com/decred/pi-ui#cbfd9eb41426f63d5022efbc92919209ea335d29"
   dependencies:
     clamp-js-main "^0.11.5"
     lodash "^4.17.15"
-    prop-types "^15.7.2"
-    react-select "5.2.1"
-    react-select-event "^5.3.0"
-    react-spring "^9.3.0"
+    prop-types "^15.8.1"
+    react-select "^5.2.1"
+    react-select-event "^5.5.0"
+    react-spring "^9.4.5"
     react-tapper "^0.1.23"
 
+picocolors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
+
 picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
@@ -9885,6 +10188,108 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-attribute-case-insensitive@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-attribute-case-insensitive/-/postcss-attribute-case-insensitive-5.0.2.tgz#03d761b24afc04c09e757e92ff53716ae8ea2741"
+  integrity sha512-XIidXV8fDr0kKt28vqki84fRK8VW8eTuIa4PChv2MqKuT6C9UjmSKzen6KaWhWEoYvwxFCa7n/tC1SZ3tyq4SQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-clamp@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clamp/-/postcss-clamp-4.1.0.tgz#7263e95abadd8c2ba1bd911b0b5a5c9c93e02363"
+  integrity sha512-ry4b1Llo/9zz+PKC+030KUnPITTJAHeOwjfAyyB60eT0AorGLdzp52s31OsPRHRf8NchkgFoG2y6fCfn1IV1Ow==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-functional-notation@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-functional-notation/-/postcss-color-functional-notation-4.2.4.tgz#21a909e8d7454d3612d1659e471ce4696f28caec"
+  integrity sha512-2yrTAUZUab9s6CpxkxC4rVgFEVaR6/2Pipvi6qcgvnYiVqZcbDHEoBDhrXzyb7Efh2CCfHQNtcqWcIruDTIUeg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-hex-alpha@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-color-hex-alpha/-/postcss-color-hex-alpha-8.0.4.tgz#c66e2980f2fbc1a63f5b079663340ce8b55f25a5"
+  integrity sha512-nLo2DCRC9eE4w2JmuKgVA3fGL3d01kGq752pVALF68qpGLmx2Qrk91QTKkdUqqp45T1K1XV8IhQpcu1hoAQflQ==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-color-rebeccapurple@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-7.1.1.tgz#63fdab91d878ebc4dd4b7c02619a0c3d6a56ced0"
+  integrity sha512-pGxkuVEInwLHgkNxUc4sdg4g3py7zUeCQ9sMfwyHAT+Ezk8a4OaaVZ8lIY5+oNqA/BXXgLyXv0+5wHP68R79hg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-media@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.2.tgz#c8f9637edf45fef761b014c024cee013f80529ea"
+  integrity sha512-7yi25vDAoHAkbhAzX9dHx2yc6ntS4jQvejrNcC+csQJAXjj15e7VcWfMgLqBNAbOvqi5uIa9huOVwdHbf+sKqg==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-properties@^12.1.8:
+  version "12.1.8"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.8.tgz#aa003e1885c5bd28e2e32496cd597e389ca889e4"
+  integrity sha512-8rbj8kVu00RQh2fQF81oBqtduiANu4MIxhyf0HbbStgPtnFlWn0yiaYTpLHrPnJbffVY1s9apWsIoVZcc68FxA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-custom-selectors@^6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/postcss-custom-selectors/-/postcss-custom-selectors-6.0.3.tgz#1ab4684d65f30fed175520f82d223db0337239d9"
+  integrity sha512-fgVkmyiWDwmD3JbpCmB45SvvlCD6z9CG6Ie6Iere22W5aHea6oWa7EM2bpnv2Fj3I94L3VbtvX9KqwSi5aFzSg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
+postcss-dir-pseudo-class@^6.0.5:
+  version "6.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-dir-pseudo-class/-/postcss-dir-pseudo-class-6.0.5.tgz#2bf31de5de76added44e0a25ecf60ae9f7c7c26c"
+  integrity sha512-eqn4m70P031PF7ZQIvSgy9RSJ5uI2171O/OO/zcRNYpJbvaeKFUlar1aJ7rmgiQtbm0FSPsRewjpdS0Oew7MPA==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-double-position-gradients@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-double-position-gradients/-/postcss-double-position-gradients-3.1.2.tgz#b96318fdb477be95997e86edd29c6e3557a49b91"
+  integrity sha512-GX+FuE/uBR6eskOK+4vkXgT6pDkexLokPaz/AbJna9s5Kzp/yl488pKPjhy0obB475ovfT1Wv8ho7U/cHNaRgQ==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
+postcss-env-function@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.yarnpkg.com/postcss-env-function/-/postcss-env-function-4.0.6.tgz#7b2d24c812f540ed6eda4c81f6090416722a8e7a"
+  integrity sha512-kpA6FsLra+NqcFnL81TnsU+Z7orGtDTxcOhl6pwXeEq1yFPpRMkCDpHhrz8CFQDr/Wfm0jLiNQ1OsGGPjlqPwA==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-focus-visible@^6.0.4:
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-visible/-/postcss-focus-visible-6.0.4.tgz#50c9ea9afa0ee657fb75635fabad25e18d76bf9e"
+  integrity sha512-QcKuUU/dgNsstIK6HELFRT5Y3lbrMLEOwG+A4s5cA+fx3A3y/JTq3X9LaOj3OC3ALH0XqyrgQIgey/MIZ8Wczw==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-focus-within@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-focus-within/-/postcss-focus-within-5.0.4.tgz#5b1d2ec603195f3344b716c0b75f61e44e8d2e20"
+  integrity sha512-vvjDN++C0mu8jz4af5d52CB184ogg/sSxAFS+oUJQq2SuCe7T5U2iIsVJtsCp2d6R4j0jr5+q3rPkBVZkXD9fQ==
+  dependencies:
+    postcss-selector-parser "^6.0.9"
+
+postcss-font-variant@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-font-variant/-/postcss-font-variant-5.0.0.tgz#efd59b4b7ea8bb06127f2d031bfbb7f24d32fa66"
+  integrity sha512-1fmkBaCALD72CK2a9i468mA/+tr9/1cBxRRMXOUaZqO43oWPR5imcyPjXwuv7PXbCid4ndlP5zWhidQVVa3hmA==
+
+postcss-gap-properties@^3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-gap-properties/-/postcss-gap-properties-3.0.5.tgz#f7e3cddcf73ee19e94ccf7cb77773f9560aa2fff"
+  integrity sha512-IuE6gKSdoUNcvkGIqdtjtcMtZIFyXZhmFd5RUlg97iVEvp1BZKV5ngsAjCjrVy+14uhGBQl9tzmi1Qwq4kqVOg==
+
 postcss-html@^0.36.0:
   version "0.36.0"
   resolved "https://registry.yarnpkg.com/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204"
@@ -9892,6 +10297,26 @@ postcss-html@^0.36.0:
   dependencies:
     htmlparser2 "^3.10.0"
 
+postcss-image-set-function@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.yarnpkg.com/postcss-image-set-function/-/postcss-image-set-function-4.0.7.tgz#08353bd756f1cbfb3b6e93182c7829879114481f"
+  integrity sha512-9T2r9rsvYzm5ndsBE8WgtrMlIT7VbtTfE7b3BQnudUqnBcBo7L758oc+o+pdj/dUV0l5wjwSdjeOH2DZtfv8qw==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-initial@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-initial/-/postcss-initial-4.0.1.tgz#529f735f72c5724a0fb30527df6fb7ac54d7de42"
+  integrity sha512-0ueD7rPqX8Pn1xJIjay0AZeIuDoF+V+VvMt/uOnn+4ezUKhZM/NokDeP6DwMNyIoYByuN/94IQnt5FEkaN59xQ==
+
+postcss-lab-function@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.1.tgz#6fe4c015102ff7cd27d1bd5385582f67ebdbdc98"
+  integrity sha512-xuXll4isR03CrQsmxyz92LJB2xX9n+pZJ5jE9JgcnmsCammLyKdlzrBin+25dy6wIjfhJpKBAN80gsTlCgRk2w==
+  dependencies:
+    "@csstools/postcss-progressive-custom-properties" "^1.1.0"
+    postcss-value-parser "^4.2.0"
+
 postcss-less@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad"
@@ -9899,6 +10324,25 @@ postcss-less@^3.1.4:
   dependencies:
     postcss "^7.0.14"
 
+postcss-loader@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.0.1.tgz#4c883cc0a1b2bfe2074377b7a74c1cd805684395"
+  integrity sha512-VRviFEyYlLjctSM93gAZtcJJ/iSkPZ79zWbN/1fSH+NisBByEiVLqpdVDrPLVSi8DX0oJo12kL/GppTBdKVXiQ==
+  dependencies:
+    cosmiconfig "^7.0.0"
+    klona "^2.0.5"
+    semver "^7.3.7"
+
+postcss-logical@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-logical/-/postcss-logical-5.0.4.tgz#ec75b1ee54421acc04d5921576b7d8db6b0e6f73"
+  integrity sha512-RHXxplCeLh9VjinvMrZONq7im4wjWGlRJAqmAVLXyZaXwfDWP73/oq4NdIp+OZwhQUMj0zjqDfM5Fj7qby+B4g==
+
+postcss-media-minmax@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-media-minmax/-/postcss-media-minmax-5.0.0.tgz#7140bddec173e2d6d657edbd8554a55794e2a5b5"
+  integrity sha512-yDUvFf9QdFZTuCUg0g0uNSHVlJ5X1lSzDZjPSFaiCWvjgsvu8vEVxtahPrLMinIDEEGnx6cBe6iqdx5YWz08wQ==
+
 postcss-media-query-parser@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz#27b39c6f4d94f81b1a73b8f76351c609e5cef244"
@@ -9932,6 +10376,105 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
+postcss-nesting@^10.1.10:
+  version "10.1.10"
+  resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.1.10.tgz#9c396df3d8232cbedfa95baaac6b765b8fd2a817"
+  integrity sha512-lqd7LXCq0gWc0wKXtoKDru5wEUNjm3OryLVNRZ8OnW8km6fSNUuFrjEhU3nklxXE2jvd4qrox566acgh+xQt8w==
+  dependencies:
+    "@csstools/selector-specificity" "^2.0.0"
+    postcss-selector-parser "^6.0.10"
+
+postcss-opacity-percentage@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/postcss-opacity-percentage/-/postcss-opacity-percentage-1.1.2.tgz#bd698bb3670a0a27f6d657cc16744b3ebf3b1145"
+  integrity sha512-lyUfF7miG+yewZ8EAk9XUBIlrHyUE6fijnesuz+Mj5zrIHIEw6KcIZSOk/elVMqzLvREmXB83Zi/5QpNRYd47w==
+
+postcss-overflow-shorthand@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-overflow-shorthand/-/postcss-overflow-shorthand-3.0.4.tgz#7ed6486fec44b76f0eab15aa4866cda5d55d893e"
+  integrity sha512-otYl/ylHK8Y9bcBnPLo3foYFLL6a6Ak+3EQBPOTR7luMYCOsiVTUk1iLvNf6tVPNGXcoL9Hoz37kpfriRIFb4A==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-page-break@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-page-break/-/postcss-page-break-3.0.4.tgz#7fbf741c233621622b68d435babfb70dd8c1ee5f"
+  integrity sha512-1JGu8oCjVXLa9q9rFTo4MbeeA5FMe00/9C7lN4va606Rdb+HkxXtXsmEDrIraQ11fGz/WvKWa8gMuCKkrXpTsQ==
+
+postcss-place@^7.0.5:
+  version "7.0.5"
+  resolved "https://registry.yarnpkg.com/postcss-place/-/postcss-place-7.0.5.tgz#95dbf85fd9656a3a6e60e832b5809914236986c4"
+  integrity sha512-wR8igaZROA6Z4pv0d+bvVrvGY4GVHihBCBQieXFY3kuSuMyOmEnnfFzHl/tQuqHZkfkIVBEbDvYcFfHmpSet9g==
+  dependencies:
+    postcss-value-parser "^4.2.0"
+
+postcss-preset-env@^7.8.0:
+  version "7.8.0"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.8.0.tgz#5bd3ad53b2ef02edd41645d1ffee1ff8a49f24e5"
+  integrity sha512-leqiqLOellpLKfbHkD06E04P6d9ZQ24mat6hu4NSqun7WG0UhspHR5Myiv/510qouCjoo4+YJtNOqg5xHaFnCA==
+  dependencies:
+    "@csstools/postcss-cascade-layers" "^1.0.5"
+    "@csstools/postcss-color-function" "^1.1.1"
+    "@csstools/postcss-font-format-keywords" "^1.0.1"
+    "@csstools/postcss-hwb-function" "^1.0.2"
+    "@csstools/postcss-ic-unit" "^1.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.7"
+    "@csstools/postcss-nested-calc" "^1.0.0"
+    "@csstools/postcss-normalize-display-values" "^1.0.1"
+    "@csstools/postcss-oklab-function" "^1.1.1"
+    "@csstools/postcss-progressive-custom-properties" "^1.3.0"
+    "@csstools/postcss-stepped-value-functions" "^1.0.1"
+    "@csstools/postcss-text-decoration-shorthand" "^1.0.0"
+    "@csstools/postcss-trigonometric-functions" "^1.0.2"
+    "@csstools/postcss-unset-value" "^1.0.2"
+    autoprefixer "^10.4.8"
+    browserslist "^4.21.3"
+    css-blank-pseudo "^3.0.3"
+    css-has-pseudo "^3.0.4"
+    css-prefers-color-scheme "^6.0.3"
+    cssdb "^7.0.0"
+    postcss-attribute-case-insensitive "^5.0.2"
+    postcss-clamp "^4.1.0"
+    postcss-color-functional-notation "^4.2.4"
+    postcss-color-hex-alpha "^8.0.4"
+    postcss-color-rebeccapurple "^7.1.1"
+    postcss-custom-media "^8.0.2"
+    postcss-custom-properties "^12.1.8"
+    postcss-custom-selectors "^6.0.3"
+    postcss-dir-pseudo-class "^6.0.5"
+    postcss-double-position-gradients "^3.1.2"
+    postcss-env-function "^4.0.6"
+    postcss-focus-visible "^6.0.4"
+    postcss-focus-within "^5.0.4"
+    postcss-font-variant "^5.0.0"
+    postcss-gap-properties "^3.0.5"
+    postcss-image-set-function "^4.0.7"
+    postcss-initial "^4.0.1"
+    postcss-lab-function "^4.2.1"
+    postcss-logical "^5.0.4"
+    postcss-media-minmax "^5.0.0"
+    postcss-nesting "^10.1.10"
+    postcss-opacity-percentage "^1.1.2"
+    postcss-overflow-shorthand "^3.0.4"
+    postcss-page-break "^3.0.4"
+    postcss-place "^7.0.5"
+    postcss-pseudo-class-any-link "^7.1.6"
+    postcss-replace-overflow-wrap "^4.0.0"
+    postcss-selector-not "^6.0.1"
+    postcss-value-parser "^4.2.0"
+
+postcss-pseudo-class-any-link@^7.1.6:
+  version "7.1.6"
+  resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.6.tgz#2693b221902da772c278def85a4d9a64b6e617ab"
+  integrity sha512-9sCtZkO6f/5ML9WcTLcIyV1yz9D1rf0tWc+ulKcvV30s0iZKS/ONyETvoWsr6vnrmW+X+KmuK3gV/w5EWnT37w==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-replace-overflow-wrap@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-replace-overflow-wrap/-/postcss-replace-overflow-wrap-4.0.0.tgz#d2df6bed10b477bf9c52fab28c568b4b29ca4319"
+  integrity sha512-KmF7SBPphT4gPPcKZc7aDkweHiKEEO8cla/GjcBK+ckKxiZslIu3C4GCRW3DNfL0o7yW7kMQu9xlZ1kXRXLXtw==
+
 postcss-resolve-nested-selector@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e"
@@ -9959,6 +10502,21 @@ postcss-scss@^2.1.1:
   dependencies:
     postcss "^7.0.6"
 
+postcss-selector-not@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/postcss-selector-not/-/postcss-selector-not-6.0.1.tgz#8f0a709bf7d4b45222793fc34409be407537556d"
+  integrity sha512-1i9affjAe9xu/y9uqWH+tD4r6/hDaXJruk8xn2x1vzxC2U3J3LKO3zJW4CyxlNhA56pADJ/djpEwpH1RClI2rQ==
+  dependencies:
+    postcss-selector-parser "^6.0.10"
+
+postcss-selector-parser@^6.0.10, postcss-selector-parser@^6.0.9:
+  version "6.0.10"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.4.tgz#56075a1380a04604c38b063ea7767a129af5c2b3"
@@ -9984,6 +10542,11 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss-values-parser@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f"
@@ -10011,6 +10574,15 @@ postcss@^8.1.7, postcss@^8.2.8:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
+postcss@^8.4.16:
+  version "8.4.16"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.16.tgz#33a1d675fac39941f5f445db0de4db2b6e01d43c"
+  integrity sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prebuild-install@^5.3.4:
   version "5.3.6"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-5.3.6.tgz#7c225568d864c71d89d07f8796042733a3f54291"
@@ -10204,6 +10776,15 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2,
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-information@^5.3.0:
   version "5.6.0"
   resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.6.0.tgz#61675545fb23002f245c6540ec46077d4da3ed69"
@@ -10510,7 +11091,7 @@ react-is@16.10.2:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.10.2.tgz#984120fd4d16800e9a738208ab1fba422d23b5ab"
   integrity sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA==
 
-react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10603,21 +11184,21 @@ react-router@5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-select-event@^5.3.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/react-select-event/-/react-select-event-5.3.0.tgz#4548fffd615a47176951cbb301ee21a0c60b582a"
-  integrity sha512-Novkl7X9JJKmDV5LyYaKwl0vffWtqPrBa1vuI0v43P/f87mSA7JfdYxU93SFb99RssphVzBSIAbcnbX1w21QIQ==
+react-select-event@^5.5.0:
+  version "5.5.1"
+  resolved "https://registry.yarnpkg.com/react-select-event/-/react-select-event-5.5.1.tgz#d67e04a6a51428b1534b15ecb1b82afbe5edddcb"
+  integrity sha512-goAx28y0+iYrbqZA2FeRTreHHs/ZtSuKxtA+J5jpKT5RHPCbVZJ4MqACfPnWyFXsEec+3dP5bCrNTxIX8oYe9A==
   dependencies:
     "@testing-library/dom" ">=7"
 
-react-select@5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"
-  integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A==
+react-select@^5.2.1:
+  version "5.4.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.4.0.tgz#81f6ac73906126706f104751ee14437bd16798f4"
+  integrity sha512-CjE9RFLUvChd5SdlfG4vqxZd55AZJRrLrHzkQyTYeHlpOztqcgnyftYAolJ0SGsBev6zAs6qFrjm6KU3eo2hzg==
   dependencies:
     "@babel/runtime" "^7.12.0"
     "@emotion/cache" "^11.4.0"
-    "@emotion/react" "^11.1.1"
+    "@emotion/react" "^11.8.1"
     "@types/react-transition-group" "^4.4.0"
     memoize-one "^5.0.0"
     prop-types "^15.6.0"
@@ -10632,17 +11213,17 @@ react-smooth@^2.0.0:
     raf "^3.4.0"
     react-transition-group "2.9.0"
 
-react-spring@^9.3.0:
-  version "9.3.2"
-  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.3.2.tgz#1456ef1ab1a3997c6c39693a9fd18cfd46c92930"
-  integrity sha512-LMFgjvTJVg2ltthzgJcZ7siOdRig7L8wJZIHrc7p6ss4AaJ446xHzm9L2ZQha1ZC9QVY8/e6XfLhMTFAG6dtjw==
+react-spring@^9.4.5:
+  version "9.5.2"
+  resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.5.2.tgz#b9929ad2806e56e6408b27189ec9cdf1dc003873"
+  integrity sha512-OGWNgKi2TSjpqsK67NCUspaCgEvWcG7HcpO9KAaDLFzFGNxWdGdN3YTXhhWUqCsLAx9I6LxPzmRuUPsMNqTgrw==
   dependencies:
-    "@react-spring/core" "~9.3.0"
-    "@react-spring/konva" "~9.3.0"
-    "@react-spring/native" "~9.3.0"
-    "@react-spring/three" "~9.3.0"
-    "@react-spring/web" "~9.3.0"
-    "@react-spring/zdog" "~9.3.0"
+    "@react-spring/core" "~9.5.2"
+    "@react-spring/konva" "~9.5.2"
+    "@react-spring/native" "~9.5.2"
+    "@react-spring/three" "~9.5.2"
+    "@react-spring/web" "~9.5.2"
+    "@react-spring/zdog" "~9.5.2"
 
 react-tapper@^0.1.23:
   version "0.1.23"
@@ -11378,6 +11959,13 @@ semver@^7.1.2, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.3.7:
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.17.1:
   version "0.17.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.17.1.tgz#c1d8b059f7900f7466dd4938bdc44e11ddb376c8"
@@ -11634,6 +12222,11 @@ source-map-js@^0.6.2:
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
   integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a"
@@ -11658,7 +12251,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.5.0, source-map@^0.5.6:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -12045,6 +12638,11 @@ stylelint@^13.12.0:
     v8-compile-cache "^2.2.0"
     write-file-atomic "^3.0.3"
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 stylis@^4.0.10:
   version "4.0.10"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.10.tgz#446512d1097197ab3f02fb3c258358c3f7a14240"
@@ -12710,6 +13308,14 @@ unzip-crx-3@^0.2.0:
     mkdirp "^0.5.1"
     yaku "^0.16.6"
 
+update-browserslist-db@^1.0.5:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.7.tgz#16279639cff1d0f800b14792de43d97df2d11b7d"
+  integrity sha512-iN/XYesmZ2RmmWAiI4Z5rq0YqSiv0brj9Ce9CfhNE4xIW2h+MFxcgkxIzZ+ShkFPUkjU3gQ+3oypadD3RAMtrg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 update-notifier@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-5.1.0.tgz#4ab0d7c7f36a231dd7316cf7729313f0214d9ad9"