Create Reusable Text component for body

The text component should contain the following:

Mobile version

[ ] a container that holds all content should have a padding of 24px.
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 36px, line height 44px, colour primary 900
the support heading should have font size 20px, line height 30px, colour blue gray 700
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 24px, line height 32px, colour primary 900
the support heading should have font size 16px, line height 24px, colour blue gray 700

Tablet version

[ ] a container that holds all content should have a padding of 60px.
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 48px, line height 60px, colour primary 900
the support heading should have font size 24px, line height 32px, colour blue gray 700
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 30px, line height 38px, colour primary 900
the support heading should have font size 20px, line height 30px, colour blue gray 700

Desktop version

[ ] a container that holds all content should have a padding of 96px.
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 60px, line height 72px, colour primary 900
the support heading should have font size 30px, line height 38px, colour blue gray 700
[ ] a container with for the heading text with a support text underneath with a gap of 16px.
the heading should have font size 36px, line height 44px, colour primary 900
the support heading should have font size 24px, line height 32px, colour blue gray 700

MariaTeo / butterflies-in-a-weird-tone