contact page animation

assets/section-contact-form.css

@@ -18,6 +18,12 @@
   .contact .field {
     margin-bottom: 2rem;
   }
+
+  .contact__fields {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-column-gap: 2rem;
+  }
 }
 /*
 .contact__button {
@@ -35,10 +41,15 @@
   }
 } */
 
+#shx-contact-form-contact-us-send {
+  width: 150px;
+  height: 150px;
+  margin: 0 auto;
+}
+
 @media screen and (min-width: 750px) {
-  .contact__fields {
+  #shx-contact-form-contact-us-send {
-    display: grid;
+    width: 250px;
-    grid-template-columns: repeat(2, 1fr);
+    height: 250px;
-    grid-column-gap: 2rem;
   }
 }

sections/contact-form.liquid

@@ -33,19 +33,21 @@
       -%}
       {%- form 'contact', id: 'ContactForm', class: contact_form_class -%}
         {%- if form.posted_successfully? -%}
+          <dotlottie-player
+            id="shx-contact-form-contact-us-send"
+            src="{{ 'lottie_page_contact_us_send.lottie' | asset_url }}"
+            background="transparent"
+            speed="1"
+            autoplay
+            direction="1"
+            mode="bounce"></dotlottie-player>
+
           <h2 class="form-status form-status-list form__message" tabindex="-1" autofocus>
             {% render 'icon-success' %}
             {{ 'templates.contact.form.post_success' | t }}
           </h2>
 
-          <dotlottie-player
+         
-            src="{{ 'lottie_page_contact_us_send.lottie' | asset_url }}"
-            background="transparent"
-            speed="1"
-            autoplay
-            style="width: 300px; height: 300px; margin: 0 auto;"
-            direction="1"
-            mode="bounce"></dotlottie-player>
         {%- elsif form.errors -%}
           <div class="form__message">
             <h2 class="form-status caption-large text-body" role="alert" tabindex="-1" autofocus>