Fix privacy policy on mobile

src/app/pages/privacy/privacy.component.html

@@ -1,5 +1,5 @@
 @if (policyItems()) {
-  <section class="bg-gray-50 dark:bg-gray-800">
+  <section class="bg-gray-50 dark:bg-gray-800 pt-12 lg:pt-0">
     <div class="max-w-screen-xl px-4 py-8 mx-auto space-y-12 lg:space-y-20 lg:py-24 lg:px-6">
       <div class="items-center gap-8 lg:grid xl:gap-16">
         <div class="text-gray-500 sm:text-lg dark:text-gray-400">

src/styles.scss

@@ -1,5 +1,4 @@
 @import "styles/additional_pieces";
-@import "styles/md";
 @import "styles/landwind";
 @import "styles/colors";
 

src/styles/_additional_pieces.scss

@@ -12,6 +12,10 @@
   }
 }
 
+.pt-12 {
+  @include pt(12);
+}
+
 .mt-8 {
   @include mt(8);
 
@@ -27,3 +31,7 @@
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   @include spaceY(2);
 }
+
+
+@import "md";
+@import "lg";

src/styles/_breakpoints.scss

@@ -1 +1,2 @@
 $md: 768px;
+$lg: 1024px;

src/styles/_lg.scss

@@ -0,0 +1,9 @@
+@import "breakpoints";
+
+@media screen and (min-width: $lg) {
+  .lg {
+    &\:pt-0 {
+      padding-top: 0;
+    }
+  }
+}

src/styles/_mixins.scss

@@ -2,6 +2,10 @@
   margin-top: 0.25rem * $amount;
 }
 
+@mixin pt($amount) {
+  padding-top: 0.25rem * $amount;
+}
+
 @mixin spaceY($amount) {
   $num: 0.25rem * $amount;
   --tw-space-y-reverse: 0;