diff --git a/src/features/online-board/components/OnlineBoardDetailsPage.scss b/src/features/online-board/components/OnlineBoardDetailsPage.scss
index 63577a50..b56975d8 100644
--- a/src/features/online-board/components/OnlineBoardDetailsPage.scss
+++ b/src/features/online-board/components/OnlineBoardDetailsPage.scss
@@ -11,7 +11,7 @@
   // Angular gives the route strip a tall top padding so the status text
   // ('Прибыл', 'Вылетел') has room above the progress bar, and a smaller
   // bottom padding leading into the time-details block.
-  padding: 40px vars.$space-xl 0;
+  padding: vars.$space-xxl vars.$space-xl 0;
 
   // Asymmetric grid (matches Angular's flight-route):
   //   depart-time   depart-station   status/progress   arrive-time   arrive-station
@@ -177,7 +177,7 @@
   &__details {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 40px;
+    gap: vars.$space-xxl;
     margin-top: vars.$space-xl;
     padding-top: vars.$space-xl;
     // Angular uses a 1.3px dotted hairline (#D1DCEA) between the route
diff --git a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
index 23d01335..0cfa9616 100644
--- a/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
+++ b/src/features/online-board/components/details-panels/FlightDetailsAccordion.scss
@@ -148,7 +148,7 @@
   &__times {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 40px;
+    gap: vars.$space-xxl;
     width: 100%;
   }
 
diff --git a/src/features/popular-requests/components/PopularRequestsPanel.scss b/src/features/popular-requests/components/PopularRequestsPanel.scss
index c31f4975..753e2b07 100644
--- a/src/features/popular-requests/components/PopularRequestsPanel.scss
+++ b/src/features/popular-requests/components/PopularRequestsPanel.scss
@@ -10,8 +10,8 @@
   border-radius: 0 0 vars.$border-radius vars.$border-radius;
 
   @include screen.mobile {
-    padding: 20px !important;
-    padding-bottom: 10px !important;
+    padding: vars.$space-xl !important;
+    padding-bottom: vars.$space-m !important;
   }
 
   &__title {
@@ -21,7 +21,7 @@
     font-weight: fonts.$font-regular;
 
     @include screen.mobile {
-      padding-bottom: 20px !important;
+      padding-bottom: vars.$space-xl !important;
     }
   }
 
diff --git a/src/ui/city-autocomplete/CityPickerPopup.scss b/src/ui/city-autocomplete/CityPickerPopup.scss
index 17d78cde..d25adc55 100644
--- a/src/ui/city-autocomplete/CityPickerPopup.scss
+++ b/src/ui/city-autocomplete/CityPickerPopup.scss
@@ -55,7 +55,7 @@
 
       &.country-start-row {
         border-top: 1px solid colors.$border-input;
-        padding-top: 12px;
+        padding-top: vars.$space-m2;
         margin-top: vars.$space-s2;
 
         &:first-child {
diff --git a/src/ui/layout/PageLayout.scss b/src/ui/layout/PageLayout.scss
index b36b415b..88912598 100644
--- a/src/ui/layout/PageLayout.scss
+++ b/src/ui/layout/PageLayout.scss
@@ -56,7 +56,7 @@
 
     @include screen.print {
       width: 100% !important;
-      margin-top: 20px !important;
+      margin-top: vars.$space-xl !important;
     }
 
     @media (max-width: vars.$media-breakpoint-desktop) {