update css

src/components/custom/sections/CallToAction.vue

@@ -227,14 +227,14 @@
     </div>
 
     <!-- tft -->
-    <div class="w-full max-w-7xl mx-auto lg:mt-20 px-16" v-else-if="id == 'tft'">
+    <div class="w-full max-w-7xl mx-auto lg:mt-20 lg:px-16" v-else-if="id == 'tft'">
       <h2
         v-if="cta.title"
         class="text-4xl mb-2 uppercase leading-tight font-semibold font-heading"
       >
         {{ cta.title }}
       </h2>
-      <div v-html="cta.content" class="mt-6 mb-8 text-2xl text-gray-800"></div>
+      <div v-html="cta.content" class="mt-6 mb-8 text-xl text-gray-800"></div>
       <div class="mt-8 tracking-wide leading-loose" v-if="cta.video_button">
         <a
           @click="toggleModal"
@@ -266,7 +266,6 @@
           text-gray-100
           px-12
           py-2
-          mr-5
           mb-4
           shadow
           rounded-full

src/components/marketing/sections/cta-sections/BrandPanel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <div class="max-w-screen-xl mx-auto py-24">
+    <div class="max-w-screen-xl mx-auto py-10">
       <!-- token -->
       <div
         v-if="id == 'token'"
@@ -245,38 +245,19 @@
       <!-- tft -->
       <div
         v-else-if="id == 'tft'"
-        class="
+        class="flex flex-wrap text-center lg:text-left lg:mt-10 lg:pt-10"
-          brandpanel
+        
-          rounded-lg
-          overflow-hidden
-          lg:grid lg:grid-cols-2
-          lg:gap-4
-        "
       >
-        <div class="relative pb-3/5 -mt-6 md:pb-1/2">
+        <div class="lg:w-1/2 px-2 self-center">
           <g-image
-            class="
+            
-              absolute
-              brandpanel
-              inset-0
-              w-full
-              h-full
-              sm:h-auto
-              translate-x-0 translate-y-center
-              rounded-md
-              object-fill object-left-top
-              sm:translate-x-0
-              lg:translate-y-20
-            "
             :src="image"
             :alt="brand.title"
           />
         </div>
         <div
           class="
-            px-6
+            lg:w-1/2 px-2 lg:pr-20 lg:mt-10 order-1 lg:order-none
-            sm:px-10
-            xl:px-15
           "
         >
           <div class="lg:self-center">

src/components/marketing/sections/cta-sections/Header.vue

@@ -183,7 +183,6 @@
               text-gray-100
               px-12
               py-2
-              mr-5
               mb-4
               shadow
               rounded-full
@@ -202,7 +201,6 @@
               text-gray-100
               px-12
               py-2
-              mr-5
               mb-4
               shadow
               rounded-full