/* my custom vars and clamps */
:root{
--font-size-xs: clamp(0.75rem, 1vw, 1rem);       /* 12.00px, 1vw, 16.00px */
--font-size-sm: clamp(0.875rem, 1.5vw, 1rem);   /* 14.00px, 1.5vw, 16.00px */
--font-size-md: clamp(1rem, 2vw, 1.25rem);      /* 16.00px, 2vw, 20.00px */
--font-size-lg: clamp(1.25rem, 3vw, 1.875rem);  /* 20.00px, 3vw, 30.00px */
--font-size-xl: clamp(1.875rem, 4vw, 2.813rem); /* 30.00px, 4vw, 45.00px */
--font-size-xxl: clamp(2.813rem, 4.5vw, 3.5rem);/* 45.00px, 4.5vw, 56.00px */


--padding-xs: clamp(0.25rem, 0.5vw, 0.5rem);    /* 4.00px, 0.5vw, 8.00px */
--padding-sm: clamp(0.5rem, 1vw, 1rem);         /* 8.00px, 1vw, 16.00px */
--padding-md: clamp(1rem, 2vw, 1.5rem);         /* 16.00px, 2vw, 24.00px */
--padding-lg: clamp(1.5rem, 3vw, 2.5rem);       /* 24.00px, 3vw, 40.00px */

--margin-xs: clamp(0.25rem, 0.5vw, 0.5rem);     /* 4.00px, 0.5vw, 8.00px */
--margin-sm: clamp(0.5rem, 1vw, 1rem);          /* 8.00px, 1vw, 16.00px */
--margin-md: clamp(1rem, 2vw, 1.5rem);          /* 16.00px, 2vw, 24.00px */
--margin-lg: clamp(1.5rem, 3vw, 2.3rem);        /* 24.00px, 3vw, 36.80px */


}