Generated by SassMeister.com.

scaffolding.scss

@charset "UTF-8";
@use "sass:color";
@use "sass:map";
@use "sass:string";

$scaffolding--cols: 16;

// Flexbox and grid
$pl--flexgrid-common: (
    'items--stretch': ('prop': 'align-items', 'val': 'stretch'),
    'items--start': ('prop': 'align-items', 'val': 'flex-start'),
    'items--center': ('prop': 'align-items', 'val': 'center'),
    'items--end': ('prop': 'align-items', 'val': 'flex-end'),
    'items--baseline': ('prop': 'align-items', 'val': 'baseline'),
    'content--start': ('prop': 'align-content', 'val': 'flex-start'),
    'content--center': ('prop': 'align-content', 'val': 'center'),
    'content--end': ('prop': 'align-content', 'val': 'flex-end'),
    'content--between': ('prop': 'align-content', 'val': 'space-between'),
    'content--around': ('prop': 'align-content', 'val': 'space-around'),
    'content--evenly': ('prop': 'align-content', 'val': 'space-evenly'),
    'justify--start': ('prop': 'justify-content', 'val': 'flex-start'),
    'justify--center': ('prop': 'justify-content', 'val': 'center'),
    'justify--end': ('prop': 'justify-content', 'val': 'flex-end'),
    'justify--between': ('prop': 'justify-content', 'val': 'space-between'),
    'justify--around': ('prop': 'justify-content', 'val': 'space-around'),
    'justify-items--start': ('prop': 'justify-items', 'val': 'flex-start'),
    'justify-items--center': ('prop': 'justify-items', 'val': 'center'),
    'justify-items--end': ('prop': 'justify-items', 'val': 'flex-end'),
    'justify-items--auto': ('prop': 'justify-items', 'val': 'auto'),
    'justify-items--stretch': ('prop': 'justify-items', 'val': 'stretch'),
    'justify-self--start': ('prop': 'justify-self', 'val': 'flex-start'),
    'justify-self--center': ('prop': 'justify-self', 'val': 'center'),
    'justify-self--end': ('prop': 'justify-self', 'val': 'flex-end'),
    'justify-self--auto': ('prop': 'justify-self', 'val': 'auto'),
    'justify-self--stretch': ('prop': 'justify-self', 'val': 'stretch'),
    'self--auto': ('prop': 'align-self', 'val': 'auto'),
    'self--start': ('prop': 'align-self', 'val': 'flex-start'),
    'self--center': ('prop': 'align-self', 'val': 'center'),
    'self--end': ('prop': 'align-self', 'val': 'flex-end'),
    'self--stretch': ('prop': 'align-self', 'val': 'stretch'),
    'order--first': ('prop': 'order', 'val': '-9999'),
    'order--last': ('prop': 'order', 'val': '9999'),
    'order--none': ('prop': 'order', 'val': '0'),
    'contents': ('prop': 'display', 'val': 'contents'),
);

// Flexbox
$pl--flex: (
    'flex': ('prop':'display','val':'flex'),
    'flex--inline': ('prop':'display','val':'inline-flex'),
    'flex--row': ('prop':'flex-direction','val':'row'),
    'flex--row-reverse': ('prop':'flex-direction','val':'row-reverse'),
    'flex--col': ('prop':'flex-direction','val':'column'),
    'flex--col-reverse': ('prop':'flex-direction','val':'column-reverse'),
    'flex--initial': ('prop':'flex-direction','val':'initial'),
    'flex--1': ('prop':'flex','val':'1'),
    'flex--auto': ('prop':'flex','val':'auto'),
    'flex--none': ('prop':'flex','val':'none'),
    'flex--no-wrap': ('prop':'flex-wrap','val':'no-wrap'),
    'flex--wrap': ('prop':'flex-wrap','val':'wrap'),
    'flex--wrap-reverse': ('prop':'flex-wrap','val':'wrap-reverse'),
    'flex--grow': ('prop':'flex-grow','val':'1'),
    'flex--grow-0': ('prop':'flex-grow','val':'0'),
    'flex--shrink': ('prop':'flex-shrink','val':'1'),
    'flex--shrink-0': ('prop':'flex-shrink','val':'0')
);

// Grid
$pl--grid: (
    'grid': ('prop': 'display', 'val': 'grid'),
    'grid--inline': ('prop': 'display', 'val': 'inline-grid'),
    'grid--flow-row': ('prop': 'grid-auto-flow', 'val': 'row'),
    'grid--flow-column': ('prop': 'grid-auto-flow', 'val': 'column'),
    'grid--flow-row-dense': ('prop': 'grid-auto-flow', 'val': 'row dense'),
    'grid--flow-col-dense': ('prop': 'grid-auto-flow', 'val': 'column dense'),
    'auto--rows': ('prop': 'grid-auto-rows', 'val': 'auto'),
    'auto--rows-min': ('prop': 'grid-auto-rows', 'val': 'min-content'),
    'auto--rows-max': ('prop': 'grid-auto-rows', 'val': 'max-content'),
    'auto--cols': ('prop': 'grid-auto-columns', 'val': 'auto'),
    'auto--cols-min': ('prop': 'grid-auto-columns', 'val': 'min-content'),
    'auto--cols-max': ('prop': 'grid-auto-columns', 'val': 'max-content'),
    'grid--template-rows': ('prop': 'grid-template-rows', 'val': var(--sf-grid-template-rows,"none")),
    'grid--template-cols': ('prop': 'grid-template-columns', 'val': var(--sf-grid-template-cols,"none")),
    'grid--template-areas': ('prop': 'grid-template-areas', 'val': var(--sf-grid-template-areas,"none")),
    'gap--0': ('prop': 'gap', 'val': '0'),
    'gap--row': ('prop': 'row-gap', 'val': var(--sf-gap-row, 0)),
    'gap--col': ('prop': 'column-gap', 'val': var(--sf-gap-col, 0)),
    'row--start': ('prop': 'grid-row-start', 'val': var(--sf-row-start, "auto")),
    'row--end': ('prop': 'grid-row-end', 'val': var(--sf-row-end, "auto")),
    'col--start': ('prop': 'grid-column-start', 'val': var(--sf-col-start, "auto")),
    'col--start-auto': ('prop': 'grid-column-start', 'val': 'auto'),
    'col--end': ('prop': 'grid-column-end', 'val': var(--sf-col-end, "auto")),
    'col--end-auto': ('prop': 'grid-column-end', 'val': 'auto'),
    'col--span-full': ('prop': 'grid-column', 'val': '1/-1'),
    'grid--area': ('prop': 'grid-area', 'val': var(--sf-grid-area, "auto")),
    'grid--cols-none': ('prop': 'grid-template-columns', 'val': 'none'),
    'grid--rows-none': ('prop': 'grid-template-rows', 'val': 'none'),
    'place-content--start': ('prop': 'place-content', 'val': 'start'),
    'place-content--center': ('prop': 'place-content', 'val': 'center'),
    'place-content--end': ('prop': 'place-content', 'val': 'end'),
    'place-content--between': ('prop': 'place-content', 'val': 'space-between'),
    'place-content--around': ('prop': 'place-content', 'val': 'space-around'),
    'place-content--evenly': ('prop': 'place-content', 'val': 'space-evenly'),
    'place-content--stretch': ('prop': 'place-content', 'val': 'stretch'),
    'place-items--start': ('prop': 'place-items', 'val': 'start'),
    'place-items--center': ('prop': 'place-items', 'val': 'center'),
    'place-items--end': ('prop': 'place-items', 'val': 'end'),
    'place-items--stretch': ('prop': 'place-items', 'val': 'stretch'),
    'place-items--baseline': ('prop': 'place-items', 'val': 'baseline'),
    'place-items--auto': ('prop': 'place-items', 'val': 'auto'),
    'place-self--auto': ('prop': 'place-self', 'val': 'auto'),
    'place-self--start': ('prop': 'place-self', 'val': 'start'),
    'place-self--center': ('prop': 'place-self', 'val': 'center'),
    'place-self--end': ('prop': 'place-self', 'val': 'end'),
    'place-self--stretch': ('prop': 'place-self', 'val': 'stretch'),
);

[sf-flex]{
    @each $name, $style in $pl--flex {
        &[sf-flex~=#{unquote('"#{ $name }"')}]{
            @if $name == 'flex' or $name == 'flex--inline' {
                gap: var(--sf-gap, 10px);
            }
            #{map.get($style, 'prop')}: #{map.get($style, 'val')};
        }
    };
    &[sf-flex\:items]{
        @each $name, $style in $pl--flexgrid-common {
            &[sf-flex\:items~=#{unquote('"#{ $name }"')}]{
                #{map.get($style, 'prop')}: #{map.get($style, 'val')};
            }
        };
    }
};
[sf-grid]{
    @each $name, $style in $pl--grid {
        &[sf-grid~=#{unquote('"#{ $name }"')}]{
            @if $name == 'grid' or $name == 'grid--inline' {
                gap: var(--sf-gap, 10px);
            }
            #{map.get($style, 'prop')}: #{map.get($style, 'val')};
        }
    };
    // For all columns:
    @for $index from 1 through $scaffolding--cols {
        &[sf-grid~="grid--cols-#{$index}"]{
            grid-template-columns: repeat(#{$index}, minmax(0, 1fr));
        }
        &[sf-grid~="col--span-#{$index}"]{
            grid-column: span #{$index} / span #{$index};
        }
        &[sf-grid~="row--span-#{$index}"]{
            grid-row: span #{$index} / span #{$index};
        }
        &[sf-grid~="col--start-#{$index}"]{
            grid-column-start: #{$index};
        }
        &[sf-grid~="row--start-#{$index}"]{
            grid-row-start: #{$index};
        }
        &[sf-grid~="col--end-#{$index}"]{
            grid-column-end: #{$index};
        }
        &[sf-grid~="row--end-#{$index}"]{
            grid-row-end: #{$index};
        }
    }
    &[sf-grid\:items]{
        @each $name, $style in $pl--flexgrid-common {
            &[sf-grid\:items~=#{unquote('"#{ $name }"')}]{
                #{map.get($style, 'prop')}: #{map.get($style, 'val')};
            }
        };
    }
};

style.css

[sf-flex][sf-flex~=flex] {
  gap: var(--sf-gap, 10px);
  display: flex;
}
[sf-flex][sf-flex~=flex--inline] {
  gap: var(--sf-gap, 10px);
  display: inline-flex;
}
[sf-flex][sf-flex~=flex--row] {
  flex-direction: row;
}
[sf-flex][sf-flex~=flex--row-reverse] {
  flex-direction: row-reverse;
}
[sf-flex][sf-flex~=flex--col] {
  flex-direction: column;
}
[sf-flex][sf-flex~=flex--col-reverse] {
  flex-direction: column-reverse;
}
[sf-flex][sf-flex~=flex--initial] {
  flex-direction: initial;
}
[sf-flex][sf-flex~=flex--1] {
  flex: 1;
}
[sf-flex][sf-flex~=flex--auto] {
  flex: auto;
}
[sf-flex][sf-flex~=flex--none] {
  flex: none;
}
[sf-flex][sf-flex~=flex--no-wrap] {
  flex-wrap: no-wrap;
}
[sf-flex][sf-flex~=flex--wrap] {
  flex-wrap: wrap;
}
[sf-flex][sf-flex~=flex--wrap-reverse] {
  flex-wrap: wrap-reverse;
}
[sf-flex][sf-flex~=flex--grow] {
  flex-grow: 1;
}
[sf-flex][sf-flex~=flex--grow-0] {
  flex-grow: 0;
}
[sf-flex][sf-flex~=flex--shrink] {
  flex-shrink: 1;
}
[sf-flex][sf-flex~=flex--shrink-0] {
  flex-shrink: 0;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=items--stretch] {
  align-items: stretch;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=items--start] {
  align-items: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=items--center] {
  align-items: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=items--end] {
  align-items: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=items--baseline] {
  align-items: baseline;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--start] {
  align-content: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--center] {
  align-content: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--end] {
  align-content: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--between] {
  align-content: space-between;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--around] {
  align-content: space-around;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=content--evenly] {
  align-content: space-evenly;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify--start] {
  justify-content: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify--center] {
  justify-content: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify--end] {
  justify-content: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify--between] {
  justify-content: space-between;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify--around] {
  justify-content: space-around;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-items--start] {
  justify-items: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-items--center] {
  justify-items: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-items--end] {
  justify-items: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-items--auto] {
  justify-items: auto;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-items--stretch] {
  justify-items: stretch;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-self--start] {
  justify-self: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-self--center] {
  justify-self: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-self--end] {
  justify-self: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-self--auto] {
  justify-self: auto;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=justify-self--stretch] {
  justify-self: stretch;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=self--auto] {
  align-self: auto;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=self--start] {
  align-self: flex-start;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=self--center] {
  align-self: center;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=self--end] {
  align-self: flex-end;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=self--stretch] {
  align-self: stretch;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=order--first] {
  order: -9999;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=order--last] {
  order: 9999;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=order--none] {
  order: 0;
}
[sf-flex][sf-flex\:items][sf-flex\:items~=contents] {
  display: contents;
}

[sf-grid][sf-grid~=grid] {
  gap: var(--sf-gap, 10px);
  display: grid;
}
[sf-grid][sf-grid~=grid--inline] {
  gap: var(--sf-gap, 10px);
  display: inline-grid;
}
[sf-grid][sf-grid~=grid--flow-row] {
  grid-auto-flow: row;
}
[sf-grid][sf-grid~=grid--flow-column] {
  grid-auto-flow: column;
}
[sf-grid][sf-grid~=grid--flow-row-dense] {
  grid-auto-flow: row dense;
}
[sf-grid][sf-grid~=grid--flow-col-dense] {
  grid-auto-flow: column dense;
}
[sf-grid][sf-grid~=auto--rows] {
  grid-auto-rows: auto;
}
[sf-grid][sf-grid~=auto--rows-min] {
  grid-auto-rows: min-content;
}
[sf-grid][sf-grid~=auto--rows-max] {
  grid-auto-rows: max-content;
}
[sf-grid][sf-grid~=auto--cols] {
  grid-auto-columns: auto;
}
[sf-grid][sf-grid~=auto--cols-min] {
  grid-auto-columns: min-content;
}
[sf-grid][sf-grid~=auto--cols-max] {
  grid-auto-columns: max-content;
}
[sf-grid][sf-grid~=grid--template-rows] {
  grid-template-rows: var(--sf-grid-template-rows, "none");
}
[sf-grid][sf-grid~=grid--template-cols] {
  grid-template-columns: var(--sf-grid-template-cols, "none");
}
[sf-grid][sf-grid~=grid--template-areas] {
  grid-template-areas: var(--sf-grid-template-areas, "none");
}
[sf-grid][sf-grid~=gap--0] {
  gap: 0;
}
[sf-grid][sf-grid~=gap--row] {
  row-gap: var(--sf-gap-row, 0);
}
[sf-grid][sf-grid~=gap--col] {
  column-gap: var(--sf-gap-col, 0);
}
[sf-grid][sf-grid~=row--start] {
  grid-row-start: var(--sf-row-start, "auto");
}
[sf-grid][sf-grid~=row--end] {
  grid-row-end: var(--sf-row-end, "auto");
}
[sf-grid][sf-grid~=col--start] {
  grid-column-start: var(--sf-col-start, "auto");
}
[sf-grid][sf-grid~=col--start-auto] {
  grid-column-start: auto;
}
[sf-grid][sf-grid~=col--end] {
  grid-column-end: var(--sf-col-end, "auto");
}
[sf-grid][sf-grid~=col--end-auto] {
  grid-column-end: auto;
}
[sf-grid][sf-grid~=col--span-full] {
  grid-column: 1/-1;
}
[sf-grid][sf-grid~=grid--area] {
  grid-area: var(--sf-grid-area, "auto");
}
[sf-grid][sf-grid~=grid--cols-none] {
  grid-template-columns: none;
}
[sf-grid][sf-grid~=grid--rows-none] {
  grid-template-rows: none;
}
[sf-grid][sf-grid~=place-content--start] {
  place-content: start;
}
[sf-grid][sf-grid~=place-content--center] {
  place-content: center;
}
[sf-grid][sf-grid~=place-content--end] {
  place-content: end;
}
[sf-grid][sf-grid~=place-content--between] {
  place-content: space-between;
}
[sf-grid][sf-grid~=place-content--around] {
  place-content: space-around;
}
[sf-grid][sf-grid~=place-content--evenly] {
  place-content: space-evenly;
}
[sf-grid][sf-grid~=place-content--stretch] {
  place-content: stretch;
}
[sf-grid][sf-grid~=place-items--start] {
  place-items: start;
}
[sf-grid][sf-grid~=place-items--center] {
  place-items: center;
}
[sf-grid][sf-grid~=place-items--end] {
  place-items: end;
}
[sf-grid][sf-grid~=place-items--stretch] {
  place-items: stretch;
}
[sf-grid][sf-grid~=place-items--baseline] {
  place-items: baseline;
}
[sf-grid][sf-grid~=place-items--auto] {
  place-items: auto;
}
[sf-grid][sf-grid~=place-self--auto] {
  place-self: auto;
}
[sf-grid][sf-grid~=place-self--start] {
  place-self: start;
}
[sf-grid][sf-grid~=place-self--center] {
  place-self: center;
}
[sf-grid][sf-grid~=place-self--end] {
  place-self: end;
}
[sf-grid][sf-grid~=place-self--stretch] {
  place-self: stretch;
}
[sf-grid][sf-grid~=grid--cols-1] {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-1] {
  grid-column: span 1/span 1;
}
[sf-grid][sf-grid~=row--span-1] {
  grid-row: span 1/span 1;
}
[sf-grid][sf-grid~=col--start-1] {
  grid-column-start: 1;
}
[sf-grid][sf-grid~=row--start-1] {
  grid-row-start: 1;
}
[sf-grid][sf-grid~=col--end-1] {
  grid-column-end: 1;
}
[sf-grid][sf-grid~=row--end-1] {
  grid-row-end: 1;
}
[sf-grid][sf-grid~=grid--cols-2] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-2] {
  grid-column: span 2/span 2;
}
[sf-grid][sf-grid~=row--span-2] {
  grid-row: span 2/span 2;
}
[sf-grid][sf-grid~=col--start-2] {
  grid-column-start: 2;
}
[sf-grid][sf-grid~=row--start-2] {
  grid-row-start: 2;
}
[sf-grid][sf-grid~=col--end-2] {
  grid-column-end: 2;
}
[sf-grid][sf-grid~=row--end-2] {
  grid-row-end: 2;
}
[sf-grid][sf-grid~=grid--cols-3] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-3] {
  grid-column: span 3/span 3;
}
[sf-grid][sf-grid~=row--span-3] {
  grid-row: span 3/span 3;
}
[sf-grid][sf-grid~=col--start-3] {
  grid-column-start: 3;
}
[sf-grid][sf-grid~=row--start-3] {
  grid-row-start: 3;
}
[sf-grid][sf-grid~=col--end-3] {
  grid-column-end: 3;
}
[sf-grid][sf-grid~=row--end-3] {
  grid-row-end: 3;
}
[sf-grid][sf-grid~=grid--cols-4] {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-4] {
  grid-column: span 4/span 4;
}
[sf-grid][sf-grid~=row--span-4] {
  grid-row: span 4/span 4;
}
[sf-grid][sf-grid~=col--start-4] {
  grid-column-start: 4;
}
[sf-grid][sf-grid~=row--start-4] {
  grid-row-start: 4;
}
[sf-grid][sf-grid~=col--end-4] {
  grid-column-end: 4;
}
[sf-grid][sf-grid~=row--end-4] {
  grid-row-end: 4;
}
[sf-grid][sf-grid~=grid--cols-5] {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-5] {
  grid-column: span 5/span 5;
}
[sf-grid][sf-grid~=row--span-5] {
  grid-row: span 5/span 5;
}
[sf-grid][sf-grid~=col--start-5] {
  grid-column-start: 5;
}
[sf-grid][sf-grid~=row--start-5] {
  grid-row-start: 5;
}
[sf-grid][sf-grid~=col--end-5] {
  grid-column-end: 5;
}
[sf-grid][sf-grid~=row--end-5] {
  grid-row-end: 5;
}
[sf-grid][sf-grid~=grid--cols-6] {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-6] {
  grid-column: span 6/span 6;
}
[sf-grid][sf-grid~=row--span-6] {
  grid-row: span 6/span 6;
}
[sf-grid][sf-grid~=col--start-6] {
  grid-column-start: 6;
}
[sf-grid][sf-grid~=row--start-6] {
  grid-row-start: 6;
}
[sf-grid][sf-grid~=col--end-6] {
  grid-column-end: 6;
}
[sf-grid][sf-grid~=row--end-6] {
  grid-row-end: 6;
}
[sf-grid][sf-grid~=grid--cols-7] {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-7] {
  grid-column: span 7/span 7;
}
[sf-grid][sf-grid~=row--span-7] {
  grid-row: span 7/span 7;
}
[sf-grid][sf-grid~=col--start-7] {
  grid-column-start: 7;
}
[sf-grid][sf-grid~=row--start-7] {
  grid-row-start: 7;
}
[sf-grid][sf-grid~=col--end-7] {
  grid-column-end: 7;
}
[sf-grid][sf-grid~=row--end-7] {
  grid-row-end: 7;
}
[sf-grid][sf-grid~=grid--cols-8] {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-8] {
  grid-column: span 8/span 8;
}
[sf-grid][sf-grid~=row--span-8] {
  grid-row: span 8/span 8;
}
[sf-grid][sf-grid~=col--start-8] {
  grid-column-start: 8;
}
[sf-grid][sf-grid~=row--start-8] {
  grid-row-start: 8;
}
[sf-grid][sf-grid~=col--end-8] {
  grid-column-end: 8;
}
[sf-grid][sf-grid~=row--end-8] {
  grid-row-end: 8;
}
[sf-grid][sf-grid~=grid--cols-9] {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-9] {
  grid-column: span 9/span 9;
}
[sf-grid][sf-grid~=row--span-9] {
  grid-row: span 9/span 9;
}
[sf-grid][sf-grid~=col--start-9] {
  grid-column-start: 9;
}
[sf-grid][sf-grid~=row--start-9] {
  grid-row-start: 9;
}
[sf-grid][sf-grid~=col--end-9] {
  grid-column-end: 9;
}
[sf-grid][sf-grid~=row--end-9] {
  grid-row-end: 9;
}
[sf-grid][sf-grid~=grid--cols-10] {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-10] {
  grid-column: span 10/span 10;
}
[sf-grid][sf-grid~=row--span-10] {
  grid-row: span 10/span 10;
}
[sf-grid][sf-grid~=col--start-10] {
  grid-column-start: 10;
}
[sf-grid][sf-grid~=row--start-10] {
  grid-row-start: 10;
}
[sf-grid][sf-grid~=col--end-10] {
  grid-column-end: 10;
}
[sf-grid][sf-grid~=row--end-10] {
  grid-row-end: 10;
}
[sf-grid][sf-grid~=grid--cols-11] {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-11] {
  grid-column: span 11/span 11;
}
[sf-grid][sf-grid~=row--span-11] {
  grid-row: span 11/span 11;
}
[sf-grid][sf-grid~=col--start-11] {
  grid-column-start: 11;
}
[sf-grid][sf-grid~=row--start-11] {
  grid-row-start: 11;
}
[sf-grid][sf-grid~=col--end-11] {
  grid-column-end: 11;
}
[sf-grid][sf-grid~=row--end-11] {
  grid-row-end: 11;
}
[sf-grid][sf-grid~=grid--cols-12] {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-12] {
  grid-column: span 12/span 12;
}
[sf-grid][sf-grid~=row--span-12] {
  grid-row: span 12/span 12;
}
[sf-grid][sf-grid~=col--start-12] {
  grid-column-start: 12;
}
[sf-grid][sf-grid~=row--start-12] {
  grid-row-start: 12;
}
[sf-grid][sf-grid~=col--end-12] {
  grid-column-end: 12;
}
[sf-grid][sf-grid~=row--end-12] {
  grid-row-end: 12;
}
[sf-grid][sf-grid~=grid--cols-13] {
  grid-template-columns: repeat(13, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-13] {
  grid-column: span 13/span 13;
}
[sf-grid][sf-grid~=row--span-13] {
  grid-row: span 13/span 13;
}
[sf-grid][sf-grid~=col--start-13] {
  grid-column-start: 13;
}
[sf-grid][sf-grid~=row--start-13] {
  grid-row-start: 13;
}
[sf-grid][sf-grid~=col--end-13] {
  grid-column-end: 13;
}
[sf-grid][sf-grid~=row--end-13] {
  grid-row-end: 13;
}
[sf-grid][sf-grid~=grid--cols-14] {
  grid-template-columns: repeat(14, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-14] {
  grid-column: span 14/span 14;
}
[sf-grid][sf-grid~=row--span-14] {
  grid-row: span 14/span 14;
}
[sf-grid][sf-grid~=col--start-14] {
  grid-column-start: 14;
}
[sf-grid][sf-grid~=row--start-14] {
  grid-row-start: 14;
}
[sf-grid][sf-grid~=col--end-14] {
  grid-column-end: 14;
}
[sf-grid][sf-grid~=row--end-14] {
  grid-row-end: 14;
}
[sf-grid][sf-grid~=grid--cols-15] {
  grid-template-columns: repeat(15, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-15] {
  grid-column: span 15/span 15;
}
[sf-grid][sf-grid~=row--span-15] {
  grid-row: span 15/span 15;
}
[sf-grid][sf-grid~=col--start-15] {
  grid-column-start: 15;
}
[sf-grid][sf-grid~=row--start-15] {
  grid-row-start: 15;
}
[sf-grid][sf-grid~=col--end-15] {
  grid-column-end: 15;
}
[sf-grid][sf-grid~=row--end-15] {
  grid-row-end: 15;
}
[sf-grid][sf-grid~=grid--cols-16] {
  grid-template-columns: repeat(16, minmax(0, 1fr));
}
[sf-grid][sf-grid~=col--span-16] {
  grid-column: span 16/span 16;
}
[sf-grid][sf-grid~=row--span-16] {
  grid-row: span 16/span 16;
}
[sf-grid][sf-grid~=col--start-16] {
  grid-column-start: 16;
}
[sf-grid][sf-grid~=row--start-16] {
  grid-row-start: 16;
}
[sf-grid][sf-grid~=col--end-16] {
  grid-column-end: 16;
}
[sf-grid][sf-grid~=row--end-16] {
  grid-row-end: 16;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=items--stretch] {
  align-items: stretch;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=items--start] {
  align-items: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=items--center] {
  align-items: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=items--end] {
  align-items: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=items--baseline] {
  align-items: baseline;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--start] {
  align-content: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--center] {
  align-content: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--end] {
  align-content: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--between] {
  align-content: space-between;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--around] {
  align-content: space-around;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=content--evenly] {
  align-content: space-evenly;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify--start] {
  justify-content: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify--center] {
  justify-content: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify--end] {
  justify-content: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify--between] {
  justify-content: space-between;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify--around] {
  justify-content: space-around;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-items--start] {
  justify-items: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-items--center] {
  justify-items: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-items--end] {
  justify-items: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-items--auto] {
  justify-items: auto;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-items--stretch] {
  justify-items: stretch;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-self--start] {
  justify-self: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-self--center] {
  justify-self: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-self--end] {
  justify-self: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-self--auto] {
  justify-self: auto;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=justify-self--stretch] {
  justify-self: stretch;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=self--auto] {
  align-self: auto;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=self--start] {
  align-self: flex-start;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=self--center] {
  align-self: center;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=self--end] {
  align-self: flex-end;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=self--stretch] {
  align-self: stretch;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=order--first] {
  order: -9999;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=order--last] {
  order: 9999;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=order--none] {
  order: 0;
}
[sf-grid][sf-grid\:items][sf-grid\:items~=contents] {
  display: contents;
}