Responsive inline props

allow an attribute to pick a different value depending on screen size.

Instead of a single value, we provide an object with properties, most of the time only two properties.

The base property provides the mobile value. All iPhones are under 450p in width. All non-plus size iPhones are under 400p
The xs or sm property provides the value for bigger devices, similar to a min-width media query, which applies to either 576p (36em) aka phablets and higher or 768px (48em) aka tablets and higher. iPad tablets start at 768px. When setting the breakpoint at sm size, we allow the iPads to benefit from the desktop style.

<Flex
 direction=	{{ base: 'column',sm: 'row' }}
 gap=		{{ base: 'sm', 	sm: 'lg' }}
 justify=	{{ base: 'sm', 	sm: 'lg' }}
>

allow an attribute to pick a different value depending on screen size.

Instead of a single value, we provide an object with properties, most of the time only two properties.

The base property provides the mobile value. All iPhones are under 450p in width. All non-plus size iPhones are under 400p

The xs or sm property provides the value for bigger devices, similar to a min-width media query, which applies to either 576p (36em) aka phablets and higher or 768px (48em) aka tablets and higher. iPad tablets start at 768px. When setting the breakpoint at sm size, we allow the iPads to benefit from the desktop style.

<Flex direction= {{ base: 'column',sm: 'row' }} gap= {{ base: 'sm', sm: 'lg' }} justify= {{ base: 'sm', sm: 'lg' }} >