@import url("/fonts/NewYork/stylesheet.css");
@import url("/fonts/Poppins/stylesheet.css");
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply tracking-[-0.04em] text-[#324D43] font-[Poppins] overflow-x-hidden;
}

@layer utilities {
  .button-l {
    @apply 2xl:text-[1.111vw] text-base leading-[115%];
  }

  .button-m {
    @apply 2xl:text-[0.972vw] text-sm leading-[115%];
  }

  .button-s {
    @apply 2xl:text-[0.833vw] text-xs leading-[115%];
  }

  .h1 {
    @apply 2xl:text-[5.556vw] md:text-[10.417vw] text-[22.222vw] leading-[90%];
  }

  .h2 {
    @apply 2xl:text-[3.333vw] md:text-[6.25vw] text-[13.333vw] leading-[110%];
  }

  .h3 {
    @apply 2xl:text-[2.222vw] md:text-[4.167vw] text-[8.889vw] leading-[110%];
  }

  .number {
    @apply 2xl:text-[4.444vw] text-[64px] md:leading-[100%] leading-[110%];
  }

  .text-m {
    @apply 2xl:text-[1.111vw] text-base 2xl:leading-[120%] leading-[130%];
  }

  .text-s {
    @apply 2xl:text-[0.972vw] text-sm leading-[130%];
  }

  .caption {
    @apply 2xl:text-[0.833vw] text-xs leading-[130%];
  }

  .caption-s {
    @apply 2xl:text-[0.694vw] text-[10px];
  }

  .subheadline-m {
    @apply 2xl:text-[1.667vw] text-2xl 2xl:leading-[120%] leading-[125%] tracking-[-4%];
  }

  .subheadline-s {
    @apply 2xl:text-[1.389vw] text-xl leading-[120%] tracking-[-4%];
  }
}
