Responsive layout

We would use this Type setting in Text Styles, also consider for consistency purposes using Generic Sizes

{
"variables": {
"Layout/Mobile/Wrapper/Min_Width": {
"type": "number",
"value": 320,
"description": "Minimum width for mobile wrapper"
},
"Layout/Mobile/Wrapper/Max_Width": {
"type": "number",
"value": 868,
"description": "Maximum width for mobile wrapper"
},
"Layout/Mobile/Wrapper/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for mobile wrapper (15px)"
},
"Layout/Mobile/Wrapper/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for mobile wrapper (15px)"
},
"Layout/Mobile/Section/Min_Width": {
"type": "number",
"value": 101,
"description": "Minimum width for mobile section (1/3 of available space: (320-15)/3)"
},
"Layout/Mobile/Section/Max_Width": {
"type": "number",
"value": 251,
"description": "Maximum width for mobile section (1/3 of available space: (868-15)/3)"
},
"Layout/Mobile/Section/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for mobile section (9px)"
},
"Layout/Mobile/Section/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for mobile section (9px)"
},
"Layout/Mobile/Block/Min_Width": {
"type": "number",
"value": 131,
"description": "Minimum width for mobile block"
},
"Layout/Mobile/Block/Max_Width": {
"type": "number",
"value": 361,
"description": "Maximum width for mobile block"
},
"Layout/Mobile/Block/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for mobile block (6px)"
},
"Layout/Mobile/Block/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for mobile block (6px)"
},
"Layout/Mobile/Subblock/Min_Width": {
"type": "number",
"value": 57,
"description": "Minimum width for mobile subblock"
},
"Layout/Mobile/Subblock/Max_Width": {
"type": "number",
"value": 171,
"description": "Maximum width for mobile subblock"
},
"Layout/Mobile/Subblock/Padding": {
"type": "number",
"value": "Sizes/1",
"description": "Padding for mobile subblock (3px)"
},
"Layout/Mobile/Subblock/Gap": {
"type": "number",
"value": "Sizes/1",
"description": "Gap for mobile subblock (3px)"
},
"Layout/Tablet/Wrapper/Min_Width": {
"type": "number",
"value": 769,
"description": "Minimum width for tablet wrapper"
},
"Layout/Tablet/Wrapper/Max_Width": {
"type": "number",
"value": 1024,
"description": "Maximum width for tablet wrapper"
},
"Layout/Tablet/Wrapper/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for tablet wrapper (18px)"
},
"Layout/Tablet/Wrapper/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for tablet wrapper (18px)"
},
"Layout/Tablet/Section/Min_Width": {
"type": "number",
"value": 251,
"description": "Minimum width for tablet section (1/3 of available space: (769-18)/3)"
},
"Layout/Tablet/Section/Max_Width": {
"type": "number",
"value": 335,
"description": "Maximum width for tablet section (1/3 of available space: (1024-18)/3)"
},
"Layout/Tablet/Section/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for tablet section (15px)"
},
"Layout/Tablet/Section/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for tablet section (15px)"
},
"Layout/Tablet/Block/Min_Width": {
"type": "number",
"value": 344,
"description": "Minimum width for tablet block"
},
"Layout/Tablet/Block/Max_Width": {
"type": "number",
"value": 485,
"description": "Maximum width for tablet block"
},
"Layout/Tablet/Block/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for tablet block (9px)"
},
"Layout/Tablet/Block/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for tablet block (9px)"
},
"Layout/Tablet/Subblock/Min_Width": {
"type": "number",
"value": 75,
"description": "Minimum width for tablet subblock"
},
"Layout/Tablet/Subblock/Max_Width": {
"type": "number",
"value": 114,
"description": "Maximum width for tablet subblock"
},
"Layout/Tablet/Subblock/Padding": {
"type": "number",
"value": "Sizes/2",
"description": "Padding for tablet subblock (6px)"
},
"Layout/Tablet/Subblock/Gap": {
"type": "number",
"value": "Sizes/2",
"description": "Gap for tablet subblock (6px)"
},
"Layout/Desktop/Wrapper/Min_Width": {
"type": "number",
"value": 1025,
"description": "Minimum width for desktop wrapper"
},
"Layout/Desktop/Wrapper/Max_Width": {
"type": "number",
"value": 1440,
"description": "Maximum width for desktop wrapper"
},
"Layout/Desktop/Wrapper/Padding": {
"type": "number",
"value": "Sizes/6",
"description": "Padding for desktop wrapper (27px)"
},
"Layout/Desktop/Wrapper/Gap": {
"type": "number",
"value": "Sizes/6",
"description": "Gap for desktop wrapper (27px)"
},
"Layout/Desktop/Section/Min_Width": {
"type": "number",
"value": 333,
"description": "Minimum width for desktop section (1/3 of available space: (1025-27)/3)"
},
"Layout/Desktop/Section/Max_Width": {
"type": "number",
"value": 471,
"description": "Maximum width for desktop section (1/3 of available space: (1440-27)/3)"
},
"Layout/Desktop/Section/Padding": {
"type": "number",
"value": "Sizes/5",
"description": "Padding for desktop section (18px)"
},
"Layout/Desktop/Section/Gap": {
"type": "number",
"value": "Sizes/5",
"description": "Gap for desktop section (18px)"
},
"Layout/Desktop/Block/Min_Width": {
"type": "number",
"value": 297,
"description": "Minimum width for desktop block"
},
"Layout/Desktop/Block/Max_Width": {
"type": "number",
"value": 453,
"description": "Maximum width for desktop block"
},
"Layout/Desktop/Block/Padding": {
"type": "number",
"value": "Sizes/4",
"description": "Padding for desktop block (15px)"
},
"Layout/Desktop/Block/Gap": {
"type": "number",
"value": "Sizes/4",
"description": "Gap for desktop block (15px)"
},
"Layout/Desktop/Subblock/Min_Width": {
"type": "number",
"value": 44,
"description": "Minimum width for desktop subblock"
},
"Layout/Desktop/Subblock/Max_Width": {
"type": "number",
"value": 96,
"description": "Maximum width for desktop subblock"
},
"Layout/Desktop/Subblock/Padding": {
"type": "number",
"value": "Sizes/3",
"description": "Padding for desktop subblock (9px)"
},
"Layout/Desktop/Subblock/Gap": {
"type": "number",
"value": "Sizes/3",
"description": "Gap for desktop subblock (9px)"
}
}
}