feat/tidy-up:

- mengurangi elm yg tidak diperlukan
- menyesuaikan font-size sesuai breakpoint

app/layouts/default.vue

@@ -5,7 +5,11 @@ const route = useRoute()
 const contentFrame = computed(() => route.meta.contentFrame)
 const contentFrameClass = computed(() => {
   switch (contentFrame.value) {
-    case 'cf-container-lg':
+    case 'cf-container-2xl':
+      return 'cf-container-2xl'
+    case 'cf-container-2xl':
+      return 'cf-container-xl'
+    case 'cf-container-xl':
       return 'cf-container-lg'
     case 'cf-container-md':
       return 'cf-container-md'
@@ -44,10 +48,21 @@ const contentFrameClass = computed(() => {
 .cf-container-md > *,
 .cf-container-sm > *,
 .cf-full-width {
-
   width: 100%;
 }
 
+.cf-full-width > * {
+  width: 100%;
+}
+
+.cf-container-2xl > * {
+  max-width: 1400px;
+}
+
+.cf-container-xl > * {
+  max-width: 1200px;
+}
+
 .cf-container-lg > * {
   max-width: 992px;
 }