style: signup card mobile styling

Author: tikagan

components/signup-card.vue

@@ -232,7 +232,7 @@ const submitForm = async () => {
 .signup-card {
   --border-gradient-angle: 0deg;
   @include cardPanel(var(--border-gradient-angle));
-  padding: toRem(58) toRem(103) toRem(93);
+  padding: clamp(toRem(32), 3.5vw, toRem(58)) clamp(toRem(14), 7vw, toRem(103)) clamp(toRem(32), 6.3vw, toRem(93));
   .content {
     position: relative;
     z-index: 2;

pages/signup.vue

@@ -1,17 +1,20 @@
 <template>
   <main :class="[`page page-${tag}`]">
-    <div class="grid-center-noGutter">
-      <div class="col-8">
+    <div id="section-signup">
+      <div class="grid-center-noGutter">
+        <div class="col-8_sm-12">
 
-        <ButtonCta
-          class="back-home-button"
-          :theme="content.back_home_cta.theme"
-          :tag="content.back_home_cta.tag"
-          :to="content.back_home_cta.to">
-          <span class="button-label"> {{ content.back_home_cta.text }} </span>
-        </ButtonCta>
+          <ButtonCta
+            class="back-home-button"
+            :theme="content.back_home_cta.theme"
+            :tag="content.back_home_cta.tag"
+            :to="content.back_home_cta.to">
+            <span class="button-label"> {{ content.back_home_cta.text }} </span>
+          </ButtonCta>
 
-        <SignupCard :signup-card="content.signup_card" />
+
+          <SignupCard :signup-card="content.signup_card" />
+        </div>
 
       </div>
     </div>
@@ -43,6 +46,9 @@ const content = computed(() => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  @include small{
+    margin-top: 4.875rem;
+  }
 }
 
 .back-home-button {