fix. 공통 스타일 분리

layers/templates/GrGallery01/index.vue

@@ -27,7 +27,7 @@ const videoPlayData = computed(() =>
       <WidgetsMainTitle
         v-if="mainTitleData"
         :resources-data="mainTitleData"
-        class="main-title"
+        class="title-sm"
       />
       <BlocksSlideThumbnail
         :slide-item-list="slideThumbnailData"
@@ -36,11 +36,3 @@ const videoPlayData = computed(() =>
     </div>
   </section>
 </template>
-
-<style scoped>
-.main-title {
-  @apply text-center text-[16px] font-medium leading-[24px] tracking-[-0.48px] md:text-[24px] md:leading-[34px] md:tracking-[-0.72px];
-  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
-  font-family: 'Spoqa Han Sans Neo', sans-serif;
-}
-</style>

layers/templates/GrVisual01/index.vue

@@ -30,7 +30,7 @@ const buttonListData = computed(() =>
     <WidgetsBackground
       v-if="backgroundData"
       :resources-data="backgroundData"
-      :gradient="true"
+      gradient="h-[342px] bg-[linear-gradient(180deg,rgba(16,13,15,0)_0%,#100D0F_90%)] md:h-[720px]"
     />
     <div class="section-content">
       <WidgetsMainTitle

layers/templates/GrVisual03/index.vue

@@ -30,23 +30,21 @@ const props = defineProps<Props>()
           v-if="hasComponentGroup(item, 'background')"
           :resources-data="getComponentGroup(item, 'background')"
         />
-        <div
-          class="relative h-full flex flex-col items-center justify-center gap-[14px] text-center md:gap-5"
-        >
+        <div class="section-content">
           <WidgetsSubTitle
             v-if="hasComponentGroup(item, 'subTitle')"
             :resources-data="getComponentGroup(item, 'subTitle')"
-            class="line-clamp-2 text-[16px] font-[500] leading-[24px] md:line-clamp-1 md:text-[24px] md:leading-[34px]"
+            class="title-sm"
           />
           <WidgetsMainTitle
             v-if="hasComponentGroup(item, 'mainTitle')"
             :resources-data="getComponentGroup(item, 'mainTitle')"
-            class="line-clamp-3 text-[24px] font-[700] leading-[34px] md:text-[50px] md:leading-[70px]"
+            class="title-lg"
           />
           <WidgetsDescription
             v-if="hasComponentGroup(item, 'description')"
             :resources-data="getComponentGroup(item, 'description')"
-            class="line-clamp-3 text-[15px] font-[400] leading-[24px] md:text-[20px] md:leading-[30px]"
+            class="description-lg"
           />
           <WidgetsButtonList
             v-if="hasComponentGroup(item, 'buttonList')"