refactor(taildwindCSS): Adjust layout for updated lg breakpoint and modify affected pages

- Refactored Tailwind `lg` breakpoint from 1024px to 1194px in tailwind.config.js.
- Updated affected pages and media queries to align with the new breakpoint and ensure consistent grid behavior.

Author: foxlee2525

components/core/layout/TwoColWrapper.vue

@@ -19,7 +19,7 @@ export default {
 
 <style lang="postcss" scpoed>
 .two-col-layout {
-    @media (min-width: 1194px) {
+    @media (min-width: 1024px) {
         grid-template-columns: 1fr 5fr;
     }
 }

components/events/EventCardCollection.vue

@@ -12,12 +12,15 @@ export default {
 
 <style lang="postcss" scoped>
 .eventCardCollection {
-    @apply mx-0 grid grid-cols-1 justify-items-center sm:grid-cols-2 md:mx-4 lg:grid-cols-3;
+    @apply mx-0 grid grid-cols-1 justify-items-center sm:grid-cols-2 md:mx-4;
     column-gap: 24px;
     row-gap: 32px;
     @media (min-width: 415px) {
         column-gap: 36px;
         row-gap: 42px;
     }
+    @media (min-width: 1194px) {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
 }
 </style>

pages/conference/poster-session.vue

@@ -7,7 +7,7 @@
                 <template #br><br /></template>
             </i18n>
         </banner>
-        <i18n-page-wrapper class="px-2 sm:px-8 md:px-16 lg:px-32" custom-x>
+        <i18n-page-wrapper class="px-2 sm:px-8 md:px-16" custom-x>
             <div class="poster-session__container">
                 <article
                     v-for="poster in $t('posters')"

pages/events/overview.vue

@@ -170,6 +170,6 @@ export default {
 
 <style scoped>
 .pageWrapper {
-    @apply px-4 md:px-32;
+    @apply px-4 lg:px-32;
 }
 </style>

tailwind.config.js

@@ -97,7 +97,7 @@ module.exports = {
             xs: '360px',
             sm: '640px',
             md: '768px',
-            lg: '1194px',
+            lg: '1024px',
             xl: '1440px',
             '2xl': '1600px',
         },