/*
¶ ↑
ASPECT
usage:
.aspect-[value]
output:
padding-left: 0; padding-right: 0; padding-top: 0; padding-bottom: 100%;
example:
.aspect-16x9
*/
$add-aspect: (
add-aspect: ( base: "add-aspect", modifiers: null, values: ( 9x16: ( slug: "9x16", isReadable: true, content: relative, extend: ( "box-sizing": border-box, "height": 0, "overflow": hidden, "padding": 0 0 177.77778%, ), ), 1x1: ( slug: "1x1", isReadable: true, content: relative, extend: ( "box-sizing": border-box, "height": 0, "overflow": hidden, "padding": 0 0 100%, ), ), 4x3: ( slug: "4x3", isReadable: true, content: relative, extend: ( "box-sizing": border-box, "height": 0, "overflow": hidden, "padding": 0 0 75%, ), ), 16x9: ( slug: "16x9", isReadable: true, content: relative, extend: ( "box-sizing": border-box, "height": 0, "overflow": hidden, "padding": 0 0 56.25%, ), ), 2x1: ( slug: "2x1", isReadable: true, content: relative, extend: ( "box-sizing": border-box, "height": 0, "overflow": hidden, "padding": 0 0 50%, ), ), ), settings: $add-aspect-settings, property: "position", type: "object", ),
);