@mixin props {
  // * responsive fonts sizes
  --fs: 100%;
  --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem); // 16px default
  --fs-1: clamp(0.65rem, 1.3vw + 0.25rem, 0.75rem); // 12px
  --fs-2: clamp(0.7rem, 2vw - 0.5rem, 0.875rem); // 14px
  --fs-3: clamp(0.85rem, 2vw - 0.25rem, 0.925rem); // 18px
  --fs-4: clamp(0.95rem, 2vw - 0.25rem, 1.313rem); // 21px
  --fs-5: clamp(1.1rem, 2vw - 0.25rem, 1.463rem); // 25px
  --fs-6: clamp(1.3rem, 2vw + 0.75rem, 2rem); // 32px
  --fs-7: clamp(1.4rem, 4vw - 0.25rem, 2.375rem); // 38px
  --fs-8: clamp(1.48rem, 4vw + 0.25rem, 3rem); // 48px
  --fs-9: clamp(1.9rem, 4vw + 0.5rem, 4rem); // 64px
  --fs-10: clamp(2.5rem, 5vw + 0.5rem, 4.5rem); // 72px
  --fs-11: clamp(3rem, 5vw + 0.75rem, 5.063rem); // 81px
  --fs-12: clamp(3.5rem, 5vw + 0.9rem, 6.375rem); // 101px

  --fs-xs: var(--fs-1);
  --fs-sm: var(--fs-3);
  --fs-base: var(--fs-0);
  --fs-md: var(--fs-5);
  --fs-lg: var(--fs-7);
  --fs-xl: var(--fs-9);
  --fs-xxl: var(--fs-11);
  --fs-xxxl: var(--fs-12);

  --display: var(--fs-12);
  --display-md: var(--fs-11);
  --display-sm: var(--fs-10);

  // h1
  --h1: var(--fs-10);
  // h2
  --h2: var(--fs-9);
  // h3
  --h3: var(--fs-8);
  // h4
  --h4: var(--fs-7);
  //h5
  --h5: var(--fs-6);
  // h6
  --h6: var(--fs-5);
}