init

assets/main.css

@@ -1,32 +1,34 @@
 @import "@nuxt/ui";
 @import "tailwindcss";
 
-
 @theme {
   /* fonts */
   --font-inter: "Inter", sans-serif;
   --font-bounded: "Bounded", sans-serif;
 
   /* colors */
-  --color-bg-light: #FFFEFB;
-  --color-bg-dark: #1A1A1A;
+  --color-bg-light: #fffefb;
+  --color-bg-dark: #1a1a1a;
 
-  --color-border: #D3E0DE;
+  --color-border: #d3e0de;
 
-  --color-text-light: #1A1A1A;
-  --color-text-dark: #FFFEFB;
+  --color-text-light: #1a1a1a;
+  --color-text-dark: #fffefb;
 
   /* button */
-  --color-button: #9A7F62;
-  --color-button-hover: #B7946D;
-  --color-button-disabled: #C5C5C5;
+  --color-button: #9a7f62;
+  --color-button-hover: #b7946d;
+  --color-button-disabled: #c5c5c5;
 }
 
-/* h1 */
-.h1 {
-  font-family: var(--font-bounded);
-  font-weight: 700;
-  line-height: 140%;
+@layer utilities {
+  .h1 {
+    @apply font-bounded text-[24px] leading-[140%] font-bold uppercase md:text-[48px] xl:text-[64px];
+  }
+
+  .h4-uppercase {
+    @apply font-inter text-base leading-[150%] font-bold uppercase sm:text-[20px] md:text-[24px];
+  }
 }
 
 .text-inter {
@@ -34,14 +36,7 @@
   line-height: 150%;
 }
 
-.h4-uppercase {
-  font-family: var(--font-inter);
-  font-weight: 700;
-  line-height: 150%;
-  text-transform: uppercase;
-}
-
 .main {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+}