@bedrock-layout/css/lib/components/columns.min.css

bedrock-layout css version

[data-br-columns]{--gap:initial;--switch-at:initial;--safeColumns:var(--col-count,1);--numberOfGutters:calc(var(--safeColumns) - 1);--largestWidth:calc(100% - max(var(--gap, 0px) * var(--numberOfGutters), 0px));--columnWidth:calc(var(--largestWidth)/var(--safeColumns));--basis:calc((var(--switch-at, var(--largestWidth)) - (var(--largestWidth) + 1px))*999);box-sizing:border-box;display:flex;flex-wrap:wrap;gap:var(--gap,0)}[data-br-columns][data-br-columns]>*{flex-basis:var(--basis);flex-grow:1;flex-shrink:1;margin:0;max-inline-size:min(max(var(--basis),var(--columnWidth)),100%);min-inline-size:min(min(var(--columnWidth),100%),100%)}[data-br-columns~="gap:size000"]{--gap:-0.5rem}[data-br-columns~="gap:size00"]{--gap:-0.25rem}[data-br-columns~="gap:size1"]{--gap:0.25rem}[data-br-columns~="gap:size2"]{--gap:0.5rem}[data-br-columns~="gap:size3"]{--gap:1rem}[data-br-columns~="gap:size4"]{--gap:1.25rem}[data-br-columns~="gap:size5"]{--gap:1.5rem}[data-br-columns~="gap:size6"]{--gap:1.75rem}[data-br-columns~="gap:size7"]{--gap:2rem}[data-br-columns~="gap:size8"]{--gap:3rem}[data-br-columns~="gap:size9"]{--gap:4rem}[data-br-columns~="gap:size10"]{--gap:5rem}[data-br-columns~="gap:size11"]{--gap:7.5rem}[data-br-columns~="gap:size12"]{--gap:10rem}[data-br-columns~="gap:size13"]{--gap:15rem}[data-br-columns~="gap:size14"]{--gap:20rem}[data-br-columns~="gap:size15"]{--gap:30rem}[data-br-columns~="switchAt:sizeContent1"]{--switch-at:20ch}[data-br-columns~="switchAt:sizeContent2"]{--switch-at:45ch}[data-br-columns~="switchAt:sizeContent3"]{--switch-at:60ch}[data-br-columns~="switchAt:sizeHeader1"]{--switch-at:20ch}[data-br-columns~="switchAt:sizeHeader2"]{--switch-at:25ch}[data-br-columns~="switchAt:sizeHeader3"]{--switch-at:35ch}[data-br-columns~="switchAt:sizeXxs"]{--switch-at:240px}[data-br-columns~="switchAt:sizeXs"]{--switch-at:360px}[data-br-columns~="switchAt:sizeSm"]{--switch-at:480px}[data-br-columns~="switchAt:sizeMd"]{--switch-at:768px}[data-br-columns~="switchAt:sizeLg"]{--switch-at:1024px}[data-br-columns~="switchAt:sizeXl"]{--switch-at:1440px}[data-br-columns~="switchAt:sizeXxl"]{--switch-at:1920px}[data-br-column~="span:1"]{--col-span:1}[data-br-column~="span:2"]{--col-span:2}[data-br-column~="span:3"]{--col-span:3}[data-br-column~="span:4"]{--col-span:4}[data-br-column~="span:5"]{--col-span:5}[data-br-column~="span:6"]{--col-span:6}[data-br-column~="span:7"]{--col-span:7}[data-br-column~="span:8"]{--col-span:8}[data-br-column~="span:9"]{--col-span:9}[data-br-column~="span:10"]{--col-span:10}[data-br-column~="span:11"]{--col-span:11}[data-br-column~="span:12"]{--col-span:12}:is([data-br-column][style*="--col-span"],[data-br-column*=span]){--maxSpan:min(var(--col-span,1),var(--safeColumns));--guttersToAdd:calc(var(--maxSpan, 1) - 1);--gutterSize:calc(var(--gap, 0px)*var(--guttersToAdd));--columnWidth:calc((var(--largestWidth)/var(--safeColumns))*var(--maxSpan, 1) + var(--gutterSize))}[data-br-column~="offsetStart:1"]{--offset-start:1}[data-br-column~="offsetStart:2"]{--offset-start:2}[data-br-column~="offsetStart:3"]{--offset-start:3}[data-br-column~="offsetStart:4"]{--offset-start:4}[data-br-column~="offsetStart:5"]{--offset-start:5}[data-br-column~="offsetStart:6"]{--offset-start:6}[data-br-column~="offsetStart:7"]{--offset-start:7}[data-br-column~="offsetStart:8"]{--offset-start:8}[data-br-column~="offsetStart:9"]{--offset-start:9}[data-br-column~="offsetStart:10"]{--offset-start:10}[data-br-column~="offsetStart:11"]{--offset-start:11}[data-br-column~="offsetStart:12"]{--offset-start:12}:is([data-br-column][style*="--offset-start"],[data-br-column*=offsetStart]){--maxOffsetStart:min(var(--offset-start,1),var(--safeColumns));--marginOffsetStartGutters:calc(var(--gap, 0px)*var(--maxOffsetStart));--marginOffsetStart:calc((var(--largestWidth)/var(--safeColumns))*var(--maxOffsetStart, 1) + var(--marginOffsetStartGutters));--basisSwitcher:max(var(--basis) * -1,0px);margin-inline-start:min(var(--marginOffsetStart),var(--basisSwitcher))}[data-br-column~="offsetEnd:1"]{--offset-end:1}[data-br-column~="offsetEnd:2"]{--offset-end:2}[data-br-column~="offsetEnd:3"]{--offset-end:3}[data-br-column~="offsetEnd:4"]{--offset-end:4}[data-br-column~="offsetEnd:5"]{--offset-end:5}[data-br-column~="offsetEnd:6"]{--offset-end:6}[data-br-column~="offsetEnd:7"]{--offset-end:7}[data-br-column~="offsetEnd:8"]{--offset-end:8}[data-br-column~="offsetEnd:9"]{--offset-end:9}[data-br-column~="offsetEnd:10"]{--offset-end:10}[data-br-column~="offsetEnd:11"]{--offset-end:11}[data-br-column~="offsetEnd:12"]{--offset-end:12}:is([data-br-column][style*="--offset-end"],[data-br-column*=offsetEnd]){--maxOffsetEnd:min(var(--offset-end,1),var(--safeColumns));--marginOffsetEndGutters:calc(var(--gap, 0px)*var(--maxOffsetEnd));--marginOffsetEnd:calc((var(--largestWidth)/var(--safeColumns))*var(--maxOffsetEnd, 1) + var(--marginOffsetEndGutters));--basisSwitcher:max(var(--basis) * -1,0px);margin-inline-end:min(var(--marginOffsetEnd),var(--basisSwitcher))}:is([data-br-columns~="padding:size000"],[data-br-column~="padding:size000"]){padding:0}:is([data-br-columns~="padding:size00"],[data-br-column~="padding:size00"]){padding:0}:is([data-br-columns~="padding:size1"],[data-br-column~="padding:size1"]){padding:.25rem}:is([data-br-columns~="padding:size2"],[data-br-column~="padding:size2"]){padding:.5rem}:is([data-br-columns~="padding:size3"],[data-br-column~="padding:size3"]){padding:1rem}:is([data-br-columns~="padding:size4"],[data-br-column~="padding:size4"]){padding:1.25rem}:is([data-br-columns~="padding:size5"],[data-br-column~="padding:size5"]){padding:1.5rem}:is([data-br-columns~="padding:size6"],[data-br-column~="padding:size6"]){padding:1.75rem}:is([data-br-columns~="padding:size7"],[data-br-column~="padding:size7"]){padding:2rem}:is([data-br-columns~="padding:size8"],[data-br-column~="padding:size8"]){padding:3rem}:is([data-br-columns~="padding:size9"],[data-br-column~="padding:size9"]){padding:4rem}:is([data-br-columns~="padding:size10"],[data-br-column~="padding:size10"]){padding:5rem}:is([data-br-columns~="padding:size11"],[data-br-column~="padding:size11"]){padding:7.5rem}:is([data-br-columns~="padding:size12"],[data-br-column~="padding:size12"]){padding:10rem}:is([data-br-columns~="padding:size13"],[data-br-column~="padding:size13"]){padding:15rem}:is([data-br-columns~="padding:size14"],[data-br-column~="padding:size14"]){padding:20rem}:is([data-br-columns~="padding:size15"],[data-br-column~="padding:size15"]){padding:30rem}:is([data-br-columns~="paddingInline:size000"],[data-br-column~="paddingInline:size000"]){padding-inline:0}:is([data-br-columns~="paddingInline:size00"],[data-br-column~="paddingInline:size00"]){padding-inline:0}:is([data-br-columns~="paddingInline:size1"],[data-br-column~="paddingInline:size1"]){padding-inline:.25rem}:is([data-br-columns~="paddingInline:size2"],[data-br-column~="paddingInline:size2"]){padding-inline:.5rem}:is([data-br-columns~="paddingInline:size3"],[data-br-column~="paddingInline:size3"]){padding-inline:1rem}:is([data-br-columns~="paddingInline:size4"],[data-br-column~="paddingInline:size4"]){padding-inline:1.25rem}:is([data-br-columns~="paddingInline:size5"],[data-br-column~="paddingInline:size5"]){padding-inline:1.5rem}:is([data-br-columns~="paddingInline:size6"],[data-br-column~="paddingInline:size6"]){padding-inline:1.75rem}:is([data-br-columns~="paddingInline:size7"],[data-br-column~="paddingInline:size7"]){padding-inline:2rem}:is([data-br-columns~="paddingInline:size8"],[data-br-column~="paddingInline:size8"]){padding-inline:3rem}:is([data-br-columns~="paddingInline:size9"],[data-br-column~="paddingInline:size9"]){padding-inline:4rem}:is([data-br-columns~="paddingInline:size10"],[data-br-column~="paddingInline:size10"]){padding-inline:5rem}:is([data-br-columns~="paddingInline:size11"],[data-br-column~="paddingInline:size11"]){padding-inline:7.5rem}:is([data-br-columns~="paddingInline:size12"],[data-br-column~="paddingInline:size12"]){padding-inline:10rem}:is([data-br-columns~="paddingInline:size13"],[data-br-column~="paddingInline:size13"]){padding-inline:15rem}:is([data-br-columns~="paddingInline:size14"],[data-br-column~="paddingInline:size14"]){padding-inline:20rem}:is([data-br-columns~="paddingInline:size15"],[data-br-column~="paddingInline:size15"]){padding-inline:30rem}:is([data-br-columns~="paddingInlineStart:size000"],[data-br-column~="paddingInlineStart:size000"]){padding-inline-start:0}:is([data-br-columns~="paddingInlineStart:size00"],[data-br-column~="paddingInlineStart:size00"]){padding-inline-start:0}:is([data-br-columns~="paddingInlineStart:size1"],[data-br-column~="paddingInlineStart:size1"]){padding-inline-start:.25rem}:is([data-br-columns~="paddingInlineStart:size2"],[data-br-column~="paddingInlineStart:size2"]){padding-inline-start:.5rem}:is([data-br-columns~="paddingInlineStart:size3"],[data-br-column~="paddingInlineStart:size3"]){padding-inline-start:1rem}:is([data-br-columns~="paddingInlineStart:size4"],[data-br-column~="paddingInlineStart:size4"]){padding-inline-start:1.25rem}:is([data-br-columns~="paddingInlineStart:size5"],[data-br-column~="paddingInlineStart:size5"]){padding-inline-start:1.5rem}:is([data-br-columns~="paddingInlineStart:size6"],[data-br-column~="paddingInlineStart:size6"]){padding-inline-start:1.75rem}:is([data-br-columns~="paddingInlineStart:size7"],[data-br-column~="paddingInlineStart:size7"]){padding-inline-start:2rem}:is([data-br-columns~="paddingInlineStart:size8"],[data-br-column~="paddingInlineStart:size8"]){padding-inline-start:3rem}:is([data-br-columns~="paddingInlineStart:size9"],[data-br-column~="paddingInlineStart:size9"]){padding-inline-start:4rem}:is([data-br-columns~="paddingInlineStart:size10"],[data-br-column~="paddingInlineStart:size10"]){padding-inline-start:5rem}:is([data-br-columns~="paddingInlineStart:size11"],[data-br-column~="paddingInlineStart:size11"]){padding-inline-start:7.5rem}:is([data-br-columns~="paddingInlineStart:size12"],[data-br-column~="paddingInlineStart:size12"]){padding-inline-start:10rem}:is([data-br-columns~="paddingInlineStart:size13"],[data-br-column~="paddingInlineStart:size13"]){padding-inline-start:15rem}:is([data-br-columns~="paddingInlineStart:size14"],[data-br-column~="paddingInlineStart:size14"]){padding-inline-start:20rem}:is([data-br-columns~="paddingInlineStart:size15"],[data-br-column~="paddingInlineStart:size15"]){padding-inline-start:30rem}:is([data-br-columns~="paddingInlineEnd:size000"],[data-br-column~="paddingInlineEnd:size000"]){padding-inline-end:0}:is([data-br-columns~="paddingInlineEnd:size00"],[data-br-column~="paddingInlineEnd:size00"]){padding-inline-end:0}:is([data-br-columns~="paddingInlineEnd:size1"],[data-br-column~="paddingInlineEnd:size1"]){padding-inline-end:.25rem}:is([data-br-columns~="paddingInlineEnd:size2"],[data-br-column~="paddingInlineEnd:size2"]){padding-inline-end:.5rem}:is([data-br-columns~="paddingInlineEnd:size3"],[data-br-column~="paddingInlineEnd:size3"]){padding-inline-end:1rem}:is([data-br-columns~="paddingInlineEnd:size4"],[data-br-column~="paddingInlineEnd:size4"]){padding-inline-end:1.25rem}:is([data-br-columns~="paddingInlineEnd:size5"],[data-br-column~="paddingInlineEnd:size5"]){padding-inline-end:1.5rem}:is([data-br-columns~="paddingInlineEnd:size6"],[data-br-column~="paddingInlineEnd:size6"]){padding-inline-end:1.75rem}:is([data-br-columns~="paddingInlineEnd:size7"],[data-br-column~="paddingInlineEnd:size7"]){padding-inline-end:2rem}:is([data-br-columns~="paddingInlineEnd:size8"],[data-br-column~="paddingInlineEnd:size8"]){padding-inline-end:3rem}:is([data-br-columns~="paddingInlineEnd:size9"],[data-br-column~="paddingInlineEnd:size9"]){padding-inline-end:4rem}:is([data-br-columns~="paddingInlineEnd:size10"],[data-br-column~="paddingInlineEnd:size10"]){padding-inline-end:5rem}:is([data-br-columns~="paddingInlineEnd:size11"],[data-br-column~="paddingInlineEnd:size11"]){padding-inline-end:7.5rem}:is([data-br-columns~="paddingInlineEnd:size12"],[data-br-column~="paddingInlineEnd:size12"]){padding-inline-end:10rem}:is([data-br-columns~="paddingInlineEnd:size13"],[data-br-column~="paddingInlineEnd:size13"]){padding-inline-end:15rem}:is([data-br-columns~="paddingInlineEnd:size14"],[data-br-column~="paddingInlineEnd:size14"]){padding-inline-end:20rem}:is([data-br-columns~="paddingInlineEnd:size15"],[data-br-column~="paddingInlineEnd:size15"]){padding-inline-end:30rem}:is([data-br-columns~="paddingBlock:size000"],[data-br-column~="paddingBlock:size000"]){padding-block:0}:is([data-br-columns~="paddingBlock:size00"],[data-br-column~="paddingBlock:size00"]){padding-block:0}:is([data-br-columns~="paddingBlock:size1"],[data-br-column~="paddingBlock:size1"]){padding-block:.25rem}:is([data-br-columns~="paddingBlock:size2"],[data-br-column~="paddingBlock:size2"]){padding-block:.5rem}:is([data-br-columns~="paddingBlock:size3"],[data-br-column~="paddingBlock:size3"]){padding-block:1rem}:is([data-br-columns~="paddingBlock:size4"],[data-br-column~="paddingBlock:size4"]){padding-block:1.25rem}:is([data-br-columns~="paddingBlock:size5"],[data-br-column~="paddingBlock:size5"]){padding-block:1.5rem}:is([data-br-columns~="paddingBlock:size6"],[data-br-column~="paddingBlock:size6"]){padding-block:1.75rem}:is([data-br-columns~="paddingBlock:size7"],[data-br-column~="paddingBlock:size7"]){padding-block:2rem}:is([data-br-columns~="paddingBlock:size8"],[data-br-column~="paddingBlock:size8"]){padding-block:3rem}:is([data-br-columns~="paddingBlock:size9"],[data-br-column~="paddingBlock:size9"]){padding-block:4rem}:is([data-br-columns~="paddingBlock:size10"],[data-br-column~="paddingBlock:size10"]){padding-block:5rem}:is([data-br-columns~="paddingBlock:size11"],[data-br-column~="paddingBlock:size11"]){padding-block:7.5rem}:is([data-br-columns~="paddingBlock:size12"],[data-br-column~="paddingBlock:size12"]){padding-block:10rem}:is([data-br-columns~="paddingBlock:size13"],[data-br-column~="paddingBlock:size13"]){padding-block:15rem}:is([data-br-columns~="paddingBlock:size14"],[data-br-column~="paddingBlock:size14"]){padding-block:20rem}:is([data-br-columns~="paddingBlock:size15"],[data-br-column~="paddingBlock:size15"]){padding-block:30rem}:is([data-br-columns~="paddingBlockStart:size000"],[data-br-column~="paddingBlockStart:size000"]){padding-block-start:0}:is([data-br-columns~="paddingBlockStart:size00"],[data-br-column~="paddingBlockStart:size00"]){padding-block-start:0}:is([data-br-columns~="paddingBlockStart:size1"],[data-br-column~="paddingBlockStart:size1"]){padding-block-start:.25rem}:is([data-br-columns~="paddingBlockStart:size2"],[data-br-column~="paddingBlockStart:size2"]){padding-block-start:.5rem}:is([data-br-columns~="paddingBlockStart:size3"],[data-br-column~="paddingBlockStart:size3"]){padding-block-start:1rem}:is([data-br-columns~="paddingBlockStart:size4"],[data-br-column~="paddingBlockStart:size4"]){padding-block-start:1.25rem}:is([data-br-columns~="paddingBlockStart:size5"],[data-br-column~="paddingBlockStart:size5"]){padding-block-start:1.5rem}:is([data-br-columns~="paddingBlockStart:size6"],[data-br-column~="paddingBlockStart:size6"]){padding-block-start:1.75rem}:is([data-br-columns~="paddingBlockStart:size7"],[data-br-column~="paddingBlockStart:size7"]){padding-block-start:2rem}:is([data-br-columns~="paddingBlockStart:size8"],[data-br-column~="paddingBlockStart:size8"]){padding-block-start:3rem}:is([data-br-columns~="paddingBlockStart:size9"],[data-br-column~="paddingBlockStart:size9"]){padding-block-start:4rem}:is([data-br-columns~="paddingBlockStart:size10"],[data-br-column~="paddingBlockStart:size10"]){padding-block-start:5rem}:is([data-br-columns~="paddingBlockStart:size11"],[data-br-column~="paddingBlockStart:size11"]){padding-block-start:7.5rem}:is([data-br-columns~="paddingBlockStart:size12"],[data-br-column~="paddingBlockStart:size12"]){padding-block-start:10rem}:is([data-br-columns~="paddingBlockStart:size13"],[data-br-column~="paddingBlockStart:size13"]){padding-block-start:15rem}:is([data-br-columns~="paddingBlockStart:size14"],[data-br-column~="paddingBlockStart:size14"]){padding-block-start:20rem}:is([data-br-columns~="paddingBlockStart:size15"],[data-br-column~="paddingBlockStart:size15"]){padding-block-start:30rem}:is([data-br-columns~="paddingBlockEnd:size000"],[data-br-column~="paddingBlockEnd:size000"]){padding-block-end:0}:is([data-br-columns~="paddingBlockEnd:size00"],[data-br-column~="paddingBlockEnd:size00"]){padding-block-end:0}:is([data-br-columns~="paddingBlockEnd:size1"],[data-br-column~="paddingBlockEnd:size1"]){padding-block-end:.25rem}:is([data-br-columns~="paddingBlockEnd:size2"],[data-br-column~="paddingBlockEnd:size2"]){padding-block-end:.5rem}:is([data-br-columns~="paddingBlockEnd:size3"],[data-br-column~="paddingBlockEnd:size3"]){padding-block-end:1rem}:is([data-br-columns~="paddingBlockEnd:size4"],[data-br-column~="paddingBlockEnd:size4"]){padding-block-end:1.25rem}:is([data-br-columns~="paddingBlockEnd:size5"],[data-br-column~="paddingBlockEnd:size5"]){padding-block-end:1.5rem}:is([data-br-columns~="paddingBlockEnd:size6"],[data-br-column~="paddingBlockEnd:size6"]){padding-block-end:1.75rem}:is([data-br-columns~="paddingBlockEnd:size7"],[data-br-column~="paddingBlockEnd:size7"]){padding-block-end:2rem}:is([data-br-columns~="paddingBlockEnd:size8"],[data-br-column~="paddingBlockEnd:size8"]){padding-block-end:3rem}:is([data-br-columns~="paddingBlockEnd:size9"],[data-br-column~="paddingBlockEnd:size9"]){padding-block-end:4rem}:is([data-br-columns~="paddingBlockEnd:size10"],[data-br-column~="paddingBlockEnd:size10"]){padding-block-end:5rem}:is([data-br-columns~="paddingBlockEnd:size11"],[data-br-column~="paddingBlockEnd:size11"]){padding-block-end:7.5rem}:is([data-br-columns~="paddingBlockEnd:size12"],[data-br-column~="paddingBlockEnd:size12"]){padding-block-end:10rem}:is([data-br-columns~="paddingBlockEnd:size13"],[data-br-column~="paddingBlockEnd:size13"]){padding-block-end:15rem}:is([data-br-columns~="paddingBlockEnd:size14"],[data-br-column~="paddingBlockEnd:size14"]){padding-block-end:20rem}:is([data-br-columns~="paddingBlockEnd:size15"],[data-br-column~="paddingBlockEnd:size15"]){padding-block-end:30rem}