Generated by SassMeister.com.

input.scss

$flex-justify-types: (
    center,
    start,
    end,
    left,
    right,
    normal,
    space-between,
    space-around,
    space-evenly,
    stretch,
    inherit,
    initial,
    revert,
    revert-layer,
    unset
);

$flex-align-types: (
    normal,
    stretch,
    center,
    start,
    end,
    self-start,
    self-end,
    baseline,
    inherit,
    initial,
    revert,
    revert-layer,
    unset
);

[flex-layout] {
    box-sizing: border-box;
    display: flex;
}

[flex-layout~='row'] {
    flex-direction: row;
}

[flex-layout~='column'] {
    flex-direction: column;
}

[flex-layout~='wrap'] {
    flex-wrap: wrap;
}

[flex] {
    box-sizing: border-box;
    flex: 1 1 0%;
}

[flex='none'] {
    flex: none;
}

[flex='1 0 auto'] {
    flex: 1 0 auto;
}

[flex='0 0 auto'] {
    flex: 0 0 auto;
}

[flex='0 1 auto'] {
    flex: 0 1 auto;
}

@mixin flex() {
    @for $i from 0 through 20 {
        [fxFlex='#{$i*5}'] {
            flex: 1 1 $i * 5%;
            box-sizing: border-box;
            max-width: $i * 5%;
        }
    }
}

@include flex;

@mixin justify {
    @each $justify in $flex-justify-types {
        $prop: $justify;
        @if ($prop == start) {
            $prop: flex-start;
        }
        @if ($prop == end) {
            $prop: flex-end;
        }

        [flex-layout~='row'],
        [flex-layout~='column'] {
            &[flex-align='#{$justify}'] {
                align-items: stretch;
                place-content: stretch #{$prop};
            }
        }
    }
}

@include justify();

@mixin justifymulti {
    @each $justify in $flex-justify-types {
        $jprop: $justify;
        @if ($jprop == start) {
            $jprop: flex-start;
        }
        @if ($jprop == end) {
            $jprop: flex-end;
        }

        @each $align in $flex-align-types {
            $aprop: $align;
            @if ($aprop == start) {
                $aprop: flex-start;
            }
            @if ($aprop == end) {
                $aprop: flex-end;
            }
            [flex-layout~='row'],
            [flex-layout~='column'] {
                &[flex-align='#{$justify} #{$align}'] {
                    align-items: #{$aprop};
                    place-content: #{$aprop} #{$jprop};
                }
            }
        }
    }
}
@include justifymulti();

[flex-gap='sm'] {
    &[flex-layout~='column'] {
        > *:not(:last-child) {
            margin-bottom: 8px;
        }
    }
    &[flex-layout~='row'] {
        > *:not(:last-child) {
            margin-right: 8px;
        }
    }
}

[flex-gap='md'] {
    &[flex-layout~='column'] {
        > *:not(:last-child) {
            margin-bottom: 16px;
        }
    }
    &[flex-layout~='row'] {
        > *:not(:last-child) {
            margin-right: 16px;
        }
    }
}

[flex-gap='lg'] {
    &[flex-layout~='column'] {
        > *:not(:last-child) {
            margin-bottom: 24px;
        }
    }
    &[flex-layout~='row'] {
        > *:not(:last-child) {
            margin-right: 24px;
        }
    }
}

[flex-gap-top] {
    margin-top: auto;
}
[flex-gap-right] {
    margin-right: auto;
}
[flex-gap-bottom] {
    margin-bottom: auto;
}
[flex-gap-left] {
    margin-left: auto;
}
[flex-gap-top='sm'] {
    margin-top: 8px;
}
[flex-gap-top='md'] {
    margin-top: 16px;
}
[flex-gap-top='lg'] {
    margin-top: 24px;
}
[flex-gap-right] {
    margin-right: auto;
}
[flex-gap-right='sm'] {
    margin-right: 8px;
}
[flex-gap-right='md'] {
    margin-right: 16px;
}
[flex-gap-right='lg'] {
    margin-right: 24px;
}
[flex-gap-top='sm'] {
    margin-top: 8px;
}
[flex-gap-top='md'] {
    margin-top: 16px;
}
[flex-gap-top='lg'] {
    margin-top: 24px;
}
[flex-gap-top='sm'] {
    margin-top: 8px;
}
[flex-gap-top='md'] {
    margin-top: 16px;
}
[flex-gap-top='lg'] {
    margin-top: 24px;
}

output.css

[flex-layout] {
  box-sizing: border-box;
  display: flex;
}

[flex-layout~=row] {
  flex-direction: row;
}

[flex-layout~=column] {
  flex-direction: column;
}

[flex-layout~=wrap] {
  flex-wrap: wrap;
}

[flex] {
  box-sizing: border-box;
  flex: 1 1 0%;
}

[flex=none] {
  flex: none;
}

[flex="1 0 auto"] {
  flex: 1 0 auto;
}

[flex="0 0 auto"] {
  flex: 0 0 auto;
}

[flex="0 1 auto"] {
  flex: 0 1 auto;
}

[fxFlex="0"] {
  flex: 1 1 0%;
  box-sizing: border-box;
  max-width: 0%;
}

[fxFlex="5"] {
  flex: 1 1 5%;
  box-sizing: border-box;
  max-width: 5%;
}

[fxFlex="10"] {
  flex: 1 1 10%;
  box-sizing: border-box;
  max-width: 10%;
}

[fxFlex="15"] {
  flex: 1 1 15%;
  box-sizing: border-box;
  max-width: 15%;
}

[fxFlex="20"] {
  flex: 1 1 20%;
  box-sizing: border-box;
  max-width: 20%;
}

[fxFlex="25"] {
  flex: 1 1 25%;
  box-sizing: border-box;
  max-width: 25%;
}

[fxFlex="30"] {
  flex: 1 1 30%;
  box-sizing: border-box;
  max-width: 30%;
}

[fxFlex="35"] {
  flex: 1 1 35%;
  box-sizing: border-box;
  max-width: 35%;
}

[fxFlex="40"] {
  flex: 1 1 40%;
  box-sizing: border-box;
  max-width: 40%;
}

[fxFlex="45"] {
  flex: 1 1 45%;
  box-sizing: border-box;
  max-width: 45%;
}

[fxFlex="50"] {
  flex: 1 1 50%;
  box-sizing: border-box;
  max-width: 50%;
}

[fxFlex="55"] {
  flex: 1 1 55%;
  box-sizing: border-box;
  max-width: 55%;
}

[fxFlex="60"] {
  flex: 1 1 60%;
  box-sizing: border-box;
  max-width: 60%;
}

[fxFlex="65"] {
  flex: 1 1 65%;
  box-sizing: border-box;
  max-width: 65%;
}

[fxFlex="70"] {
  flex: 1 1 70%;
  box-sizing: border-box;
  max-width: 70%;
}

[fxFlex="75"] {
  flex: 1 1 75%;
  box-sizing: border-box;
  max-width: 75%;
}

[fxFlex="80"] {
  flex: 1 1 80%;
  box-sizing: border-box;
  max-width: 80%;
}

[fxFlex="85"] {
  flex: 1 1 85%;
  box-sizing: border-box;
  max-width: 85%;
}

[fxFlex="90"] {
  flex: 1 1 90%;
  box-sizing: border-box;
  max-width: 90%;
}

[fxFlex="95"] {
  flex: 1 1 95%;
  box-sizing: border-box;
  max-width: 95%;
}

[fxFlex="100"] {
  flex: 1 1 100%;
  box-sizing: border-box;
  max-width: 100%;
}

[flex-layout~=row][flex-align=center],
[flex-layout~=column][flex-align=center] {
  align-items: stretch;
  place-content: stretch center;
}

[flex-layout~=row][flex-align=start],
[flex-layout~=column][flex-align=start] {
  align-items: stretch;
  place-content: stretch flex-start;
}

[flex-layout~=row][flex-align=end],
[flex-layout~=column][flex-align=end] {
  align-items: stretch;
  place-content: stretch flex-end;
}

[flex-layout~=row][flex-align=left],
[flex-layout~=column][flex-align=left] {
  align-items: stretch;
  place-content: stretch left;
}

[flex-layout~=row][flex-align=right],
[flex-layout~=column][flex-align=right] {
  align-items: stretch;
  place-content: stretch right;
}

[flex-layout~=row][flex-align=normal],
[flex-layout~=column][flex-align=normal] {
  align-items: stretch;
  place-content: stretch normal;
}

[flex-layout~=row][flex-align=space-between],
[flex-layout~=column][flex-align=space-between] {
  align-items: stretch;
  place-content: stretch space-between;
}

[flex-layout~=row][flex-align=space-around],
[flex-layout~=column][flex-align=space-around] {
  align-items: stretch;
  place-content: stretch space-around;
}

[flex-layout~=row][flex-align=space-evenly],
[flex-layout~=column][flex-align=space-evenly] {
  align-items: stretch;
  place-content: stretch space-evenly;
}

[flex-layout~=row][flex-align=stretch],
[flex-layout~=column][flex-align=stretch] {
  align-items: stretch;
  place-content: stretch stretch;
}

[flex-layout~=row][flex-align=inherit],
[flex-layout~=column][flex-align=inherit] {
  align-items: stretch;
  place-content: stretch inherit;
}

[flex-layout~=row][flex-align=initial],
[flex-layout~=column][flex-align=initial] {
  align-items: stretch;
  place-content: stretch initial;
}

[flex-layout~=row][flex-align=revert],
[flex-layout~=column][flex-align=revert] {
  align-items: stretch;
  place-content: stretch revert;
}

[flex-layout~=row][flex-align=revert-layer],
[flex-layout~=column][flex-align=revert-layer] {
  align-items: stretch;
  place-content: stretch revert-layer;
}

[flex-layout~=row][flex-align=unset],
[flex-layout~=column][flex-align=unset] {
  align-items: stretch;
  place-content: stretch unset;
}

[flex-layout~=row][flex-align="center normal"],
[flex-layout~=column][flex-align="center normal"] {
  align-items: normal;
  place-content: normal center;
}

[flex-layout~=row][flex-align="center stretch"],
[flex-layout~=column][flex-align="center stretch"] {
  align-items: stretch;
  place-content: stretch center;
}

[flex-layout~=row][flex-align="center center"],
[flex-layout~=column][flex-align="center center"] {
  align-items: center;
  place-content: center center;
}

[flex-layout~=row][flex-align="center start"],
[flex-layout~=column][flex-align="center start"] {
  align-items: flex-start;
  place-content: flex-start center;
}

[flex-layout~=row][flex-align="center end"],
[flex-layout~=column][flex-align="center end"] {
  align-items: flex-end;
  place-content: flex-end center;
}

[flex-layout~=row][flex-align="center self-start"],
[flex-layout~=column][flex-align="center self-start"] {
  align-items: self-start;
  place-content: self-start center;
}

[flex-layout~=row][flex-align="center self-end"],
[flex-layout~=column][flex-align="center self-end"] {
  align-items: self-end;
  place-content: self-end center;
}

[flex-layout~=row][flex-align="center baseline"],
[flex-layout~=column][flex-align="center baseline"] {
  align-items: baseline;
  place-content: baseline center;
}

[flex-layout~=row][flex-align="center inherit"],
[flex-layout~=column][flex-align="center inherit"] {
  align-items: inherit;
  place-content: inherit center;
}

[flex-layout~=row][flex-align="center initial"],
[flex-layout~=column][flex-align="center initial"] {
  align-items: initial;
  place-content: initial center;
}

[flex-layout~=row][flex-align="center revert"],
[flex-layout~=column][flex-align="center revert"] {
  align-items: revert;
  place-content: revert center;
}

[flex-layout~=row][flex-align="center revert-layer"],
[flex-layout~=column][flex-align="center revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer center;
}

[flex-layout~=row][flex-align="center unset"],
[flex-layout~=column][flex-align="center unset"] {
  align-items: unset;
  place-content: unset center;
}

[flex-layout~=row][flex-align="start normal"],
[flex-layout~=column][flex-align="start normal"] {
  align-items: normal;
  place-content: normal flex-start;
}

[flex-layout~=row][flex-align="start stretch"],
[flex-layout~=column][flex-align="start stretch"] {
  align-items: stretch;
  place-content: stretch flex-start;
}

[flex-layout~=row][flex-align="start center"],
[flex-layout~=column][flex-align="start center"] {
  align-items: center;
  place-content: center flex-start;
}

[flex-layout~=row][flex-align="start start"],
[flex-layout~=column][flex-align="start start"] {
  align-items: flex-start;
  place-content: flex-start flex-start;
}

[flex-layout~=row][flex-align="start end"],
[flex-layout~=column][flex-align="start end"] {
  align-items: flex-end;
  place-content: flex-end flex-start;
}

[flex-layout~=row][flex-align="start self-start"],
[flex-layout~=column][flex-align="start self-start"] {
  align-items: self-start;
  place-content: self-start flex-start;
}

[flex-layout~=row][flex-align="start self-end"],
[flex-layout~=column][flex-align="start self-end"] {
  align-items: self-end;
  place-content: self-end flex-start;
}

[flex-layout~=row][flex-align="start baseline"],
[flex-layout~=column][flex-align="start baseline"] {
  align-items: baseline;
  place-content: baseline flex-start;
}

[flex-layout~=row][flex-align="start inherit"],
[flex-layout~=column][flex-align="start inherit"] {
  align-items: inherit;
  place-content: inherit flex-start;
}

[flex-layout~=row][flex-align="start initial"],
[flex-layout~=column][flex-align="start initial"] {
  align-items: initial;
  place-content: initial flex-start;
}

[flex-layout~=row][flex-align="start revert"],
[flex-layout~=column][flex-align="start revert"] {
  align-items: revert;
  place-content: revert flex-start;
}

[flex-layout~=row][flex-align="start revert-layer"],
[flex-layout~=column][flex-align="start revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer flex-start;
}

[flex-layout~=row][flex-align="start unset"],
[flex-layout~=column][flex-align="start unset"] {
  align-items: unset;
  place-content: unset flex-start;
}

[flex-layout~=row][flex-align="end normal"],
[flex-layout~=column][flex-align="end normal"] {
  align-items: normal;
  place-content: normal flex-end;
}

[flex-layout~=row][flex-align="end stretch"],
[flex-layout~=column][flex-align="end stretch"] {
  align-items: stretch;
  place-content: stretch flex-end;
}

[flex-layout~=row][flex-align="end center"],
[flex-layout~=column][flex-align="end center"] {
  align-items: center;
  place-content: center flex-end;
}

[flex-layout~=row][flex-align="end start"],
[flex-layout~=column][flex-align="end start"] {
  align-items: flex-start;
  place-content: flex-start flex-end;
}

[flex-layout~=row][flex-align="end end"],
[flex-layout~=column][flex-align="end end"] {
  align-items: flex-end;
  place-content: flex-end flex-end;
}

[flex-layout~=row][flex-align="end self-start"],
[flex-layout~=column][flex-align="end self-start"] {
  align-items: self-start;
  place-content: self-start flex-end;
}

[flex-layout~=row][flex-align="end self-end"],
[flex-layout~=column][flex-align="end self-end"] {
  align-items: self-end;
  place-content: self-end flex-end;
}

[flex-layout~=row][flex-align="end baseline"],
[flex-layout~=column][flex-align="end baseline"] {
  align-items: baseline;
  place-content: baseline flex-end;
}

[flex-layout~=row][flex-align="end inherit"],
[flex-layout~=column][flex-align="end inherit"] {
  align-items: inherit;
  place-content: inherit flex-end;
}

[flex-layout~=row][flex-align="end initial"],
[flex-layout~=column][flex-align="end initial"] {
  align-items: initial;
  place-content: initial flex-end;
}

[flex-layout~=row][flex-align="end revert"],
[flex-layout~=column][flex-align="end revert"] {
  align-items: revert;
  place-content: revert flex-end;
}

[flex-layout~=row][flex-align="end revert-layer"],
[flex-layout~=column][flex-align="end revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer flex-end;
}

[flex-layout~=row][flex-align="end unset"],
[flex-layout~=column][flex-align="end unset"] {
  align-items: unset;
  place-content: unset flex-end;
}

[flex-layout~=row][flex-align="left normal"],
[flex-layout~=column][flex-align="left normal"] {
  align-items: normal;
  place-content: normal left;
}

[flex-layout~=row][flex-align="left stretch"],
[flex-layout~=column][flex-align="left stretch"] {
  align-items: stretch;
  place-content: stretch left;
}

[flex-layout~=row][flex-align="left center"],
[flex-layout~=column][flex-align="left center"] {
  align-items: center;
  place-content: center left;
}

[flex-layout~=row][flex-align="left start"],
[flex-layout~=column][flex-align="left start"] {
  align-items: flex-start;
  place-content: flex-start left;
}

[flex-layout~=row][flex-align="left end"],
[flex-layout~=column][flex-align="left end"] {
  align-items: flex-end;
  place-content: flex-end left;
}

[flex-layout~=row][flex-align="left self-start"],
[flex-layout~=column][flex-align="left self-start"] {
  align-items: self-start;
  place-content: self-start left;
}

[flex-layout~=row][flex-align="left self-end"],
[flex-layout~=column][flex-align="left self-end"] {
  align-items: self-end;
  place-content: self-end left;
}

[flex-layout~=row][flex-align="left baseline"],
[flex-layout~=column][flex-align="left baseline"] {
  align-items: baseline;
  place-content: baseline left;
}

[flex-layout~=row][flex-align="left inherit"],
[flex-layout~=column][flex-align="left inherit"] {
  align-items: inherit;
  place-content: inherit left;
}

[flex-layout~=row][flex-align="left initial"],
[flex-layout~=column][flex-align="left initial"] {
  align-items: initial;
  place-content: initial left;
}

[flex-layout~=row][flex-align="left revert"],
[flex-layout~=column][flex-align="left revert"] {
  align-items: revert;
  place-content: revert left;
}

[flex-layout~=row][flex-align="left revert-layer"],
[flex-layout~=column][flex-align="left revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer left;
}

[flex-layout~=row][flex-align="left unset"],
[flex-layout~=column][flex-align="left unset"] {
  align-items: unset;
  place-content: unset left;
}

[flex-layout~=row][flex-align="right normal"],
[flex-layout~=column][flex-align="right normal"] {
  align-items: normal;
  place-content: normal right;
}

[flex-layout~=row][flex-align="right stretch"],
[flex-layout~=column][flex-align="right stretch"] {
  align-items: stretch;
  place-content: stretch right;
}

[flex-layout~=row][flex-align="right center"],
[flex-layout~=column][flex-align="right center"] {
  align-items: center;
  place-content: center right;
}

[flex-layout~=row][flex-align="right start"],
[flex-layout~=column][flex-align="right start"] {
  align-items: flex-start;
  place-content: flex-start right;
}

[flex-layout~=row][flex-align="right end"],
[flex-layout~=column][flex-align="right end"] {
  align-items: flex-end;
  place-content: flex-end right;
}

[flex-layout~=row][flex-align="right self-start"],
[flex-layout~=column][flex-align="right self-start"] {
  align-items: self-start;
  place-content: self-start right;
}

[flex-layout~=row][flex-align="right self-end"],
[flex-layout~=column][flex-align="right self-end"] {
  align-items: self-end;
  place-content: self-end right;
}

[flex-layout~=row][flex-align="right baseline"],
[flex-layout~=column][flex-align="right baseline"] {
  align-items: baseline;
  place-content: baseline right;
}

[flex-layout~=row][flex-align="right inherit"],
[flex-layout~=column][flex-align="right inherit"] {
  align-items: inherit;
  place-content: inherit right;
}

[flex-layout~=row][flex-align="right initial"],
[flex-layout~=column][flex-align="right initial"] {
  align-items: initial;
  place-content: initial right;
}

[flex-layout~=row][flex-align="right revert"],
[flex-layout~=column][flex-align="right revert"] {
  align-items: revert;
  place-content: revert right;
}

[flex-layout~=row][flex-align="right revert-layer"],
[flex-layout~=column][flex-align="right revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer right;
}

[flex-layout~=row][flex-align="right unset"],
[flex-layout~=column][flex-align="right unset"] {
  align-items: unset;
  place-content: unset right;
}

[flex-layout~=row][flex-align="normal normal"],
[flex-layout~=column][flex-align="normal normal"] {
  align-items: normal;
  place-content: normal normal;
}

[flex-layout~=row][flex-align="normal stretch"],
[flex-layout~=column][flex-align="normal stretch"] {
  align-items: stretch;
  place-content: stretch normal;
}

[flex-layout~=row][flex-align="normal center"],
[flex-layout~=column][flex-align="normal center"] {
  align-items: center;
  place-content: center normal;
}

[flex-layout~=row][flex-align="normal start"],
[flex-layout~=column][flex-align="normal start"] {
  align-items: flex-start;
  place-content: flex-start normal;
}

[flex-layout~=row][flex-align="normal end"],
[flex-layout~=column][flex-align="normal end"] {
  align-items: flex-end;
  place-content: flex-end normal;
}

[flex-layout~=row][flex-align="normal self-start"],
[flex-layout~=column][flex-align="normal self-start"] {
  align-items: self-start;
  place-content: self-start normal;
}

[flex-layout~=row][flex-align="normal self-end"],
[flex-layout~=column][flex-align="normal self-end"] {
  align-items: self-end;
  place-content: self-end normal;
}

[flex-layout~=row][flex-align="normal baseline"],
[flex-layout~=column][flex-align="normal baseline"] {
  align-items: baseline;
  place-content: baseline normal;
}

[flex-layout~=row][flex-align="normal inherit"],
[flex-layout~=column][flex-align="normal inherit"] {
  align-items: inherit;
  place-content: inherit normal;
}

[flex-layout~=row][flex-align="normal initial"],
[flex-layout~=column][flex-align="normal initial"] {
  align-items: initial;
  place-content: initial normal;
}

[flex-layout~=row][flex-align="normal revert"],
[flex-layout~=column][flex-align="normal revert"] {
  align-items: revert;
  place-content: revert normal;
}

[flex-layout~=row][flex-align="normal revert-layer"],
[flex-layout~=column][flex-align="normal revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer normal;
}

[flex-layout~=row][flex-align="normal unset"],
[flex-layout~=column][flex-align="normal unset"] {
  align-items: unset;
  place-content: unset normal;
}

[flex-layout~=row][flex-align="space-between normal"],
[flex-layout~=column][flex-align="space-between normal"] {
  align-items: normal;
  place-content: normal space-between;
}

[flex-layout~=row][flex-align="space-between stretch"],
[flex-layout~=column][flex-align="space-between stretch"] {
  align-items: stretch;
  place-content: stretch space-between;
}

[flex-layout~=row][flex-align="space-between center"],
[flex-layout~=column][flex-align="space-between center"] {
  align-items: center;
  place-content: center space-between;
}

[flex-layout~=row][flex-align="space-between start"],
[flex-layout~=column][flex-align="space-between start"] {
  align-items: flex-start;
  place-content: flex-start space-between;
}

[flex-layout~=row][flex-align="space-between end"],
[flex-layout~=column][flex-align="space-between end"] {
  align-items: flex-end;
  place-content: flex-end space-between;
}

[flex-layout~=row][flex-align="space-between self-start"],
[flex-layout~=column][flex-align="space-between self-start"] {
  align-items: self-start;
  place-content: self-start space-between;
}

[flex-layout~=row][flex-align="space-between self-end"],
[flex-layout~=column][flex-align="space-between self-end"] {
  align-items: self-end;
  place-content: self-end space-between;
}

[flex-layout~=row][flex-align="space-between baseline"],
[flex-layout~=column][flex-align="space-between baseline"] {
  align-items: baseline;
  place-content: baseline space-between;
}

[flex-layout~=row][flex-align="space-between inherit"],
[flex-layout~=column][flex-align="space-between inherit"] {
  align-items: inherit;
  place-content: inherit space-between;
}

[flex-layout~=row][flex-align="space-between initial"],
[flex-layout~=column][flex-align="space-between initial"] {
  align-items: initial;
  place-content: initial space-between;
}

[flex-layout~=row][flex-align="space-between revert"],
[flex-layout~=column][flex-align="space-between revert"] {
  align-items: revert;
  place-content: revert space-between;
}

[flex-layout~=row][flex-align="space-between revert-layer"],
[flex-layout~=column][flex-align="space-between revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer space-between;
}

[flex-layout~=row][flex-align="space-between unset"],
[flex-layout~=column][flex-align="space-between unset"] {
  align-items: unset;
  place-content: unset space-between;
}

[flex-layout~=row][flex-align="space-around normal"],
[flex-layout~=column][flex-align="space-around normal"] {
  align-items: normal;
  place-content: normal space-around;
}

[flex-layout~=row][flex-align="space-around stretch"],
[flex-layout~=column][flex-align="space-around stretch"] {
  align-items: stretch;
  place-content: stretch space-around;
}

[flex-layout~=row][flex-align="space-around center"],
[flex-layout~=column][flex-align="space-around center"] {
  align-items: center;
  place-content: center space-around;
}

[flex-layout~=row][flex-align="space-around start"],
[flex-layout~=column][flex-align="space-around start"] {
  align-items: flex-start;
  place-content: flex-start space-around;
}

[flex-layout~=row][flex-align="space-around end"],
[flex-layout~=column][flex-align="space-around end"] {
  align-items: flex-end;
  place-content: flex-end space-around;
}

[flex-layout~=row][flex-align="space-around self-start"],
[flex-layout~=column][flex-align="space-around self-start"] {
  align-items: self-start;
  place-content: self-start space-around;
}

[flex-layout~=row][flex-align="space-around self-end"],
[flex-layout~=column][flex-align="space-around self-end"] {
  align-items: self-end;
  place-content: self-end space-around;
}

[flex-layout~=row][flex-align="space-around baseline"],
[flex-layout~=column][flex-align="space-around baseline"] {
  align-items: baseline;
  place-content: baseline space-around;
}

[flex-layout~=row][flex-align="space-around inherit"],
[flex-layout~=column][flex-align="space-around inherit"] {
  align-items: inherit;
  place-content: inherit space-around;
}

[flex-layout~=row][flex-align="space-around initial"],
[flex-layout~=column][flex-align="space-around initial"] {
  align-items: initial;
  place-content: initial space-around;
}

[flex-layout~=row][flex-align="space-around revert"],
[flex-layout~=column][flex-align="space-around revert"] {
  align-items: revert;
  place-content: revert space-around;
}

[flex-layout~=row][flex-align="space-around revert-layer"],
[flex-layout~=column][flex-align="space-around revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer space-around;
}

[flex-layout~=row][flex-align="space-around unset"],
[flex-layout~=column][flex-align="space-around unset"] {
  align-items: unset;
  place-content: unset space-around;
}

[flex-layout~=row][flex-align="space-evenly normal"],
[flex-layout~=column][flex-align="space-evenly normal"] {
  align-items: normal;
  place-content: normal space-evenly;
}

[flex-layout~=row][flex-align="space-evenly stretch"],
[flex-layout~=column][flex-align="space-evenly stretch"] {
  align-items: stretch;
  place-content: stretch space-evenly;
}

[flex-layout~=row][flex-align="space-evenly center"],
[flex-layout~=column][flex-align="space-evenly center"] {
  align-items: center;
  place-content: center space-evenly;
}

[flex-layout~=row][flex-align="space-evenly start"],
[flex-layout~=column][flex-align="space-evenly start"] {
  align-items: flex-start;
  place-content: flex-start space-evenly;
}

[flex-layout~=row][flex-align="space-evenly end"],
[flex-layout~=column][flex-align="space-evenly end"] {
  align-items: flex-end;
  place-content: flex-end space-evenly;
}

[flex-layout~=row][flex-align="space-evenly self-start"],
[flex-layout~=column][flex-align="space-evenly self-start"] {
  align-items: self-start;
  place-content: self-start space-evenly;
}

[flex-layout~=row][flex-align="space-evenly self-end"],
[flex-layout~=column][flex-align="space-evenly self-end"] {
  align-items: self-end;
  place-content: self-end space-evenly;
}

[flex-layout~=row][flex-align="space-evenly baseline"],
[flex-layout~=column][flex-align="space-evenly baseline"] {
  align-items: baseline;
  place-content: baseline space-evenly;
}

[flex-layout~=row][flex-align="space-evenly inherit"],
[flex-layout~=column][flex-align="space-evenly inherit"] {
  align-items: inherit;
  place-content: inherit space-evenly;
}

[flex-layout~=row][flex-align="space-evenly initial"],
[flex-layout~=column][flex-align="space-evenly initial"] {
  align-items: initial;
  place-content: initial space-evenly;
}

[flex-layout~=row][flex-align="space-evenly revert"],
[flex-layout~=column][flex-align="space-evenly revert"] {
  align-items: revert;
  place-content: revert space-evenly;
}

[flex-layout~=row][flex-align="space-evenly revert-layer"],
[flex-layout~=column][flex-align="space-evenly revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer space-evenly;
}

[flex-layout~=row][flex-align="space-evenly unset"],
[flex-layout~=column][flex-align="space-evenly unset"] {
  align-items: unset;
  place-content: unset space-evenly;
}

[flex-layout~=row][flex-align="stretch normal"],
[flex-layout~=column][flex-align="stretch normal"] {
  align-items: normal;
  place-content: normal stretch;
}

[flex-layout~=row][flex-align="stretch stretch"],
[flex-layout~=column][flex-align="stretch stretch"] {
  align-items: stretch;
  place-content: stretch stretch;
}

[flex-layout~=row][flex-align="stretch center"],
[flex-layout~=column][flex-align="stretch center"] {
  align-items: center;
  place-content: center stretch;
}

[flex-layout~=row][flex-align="stretch start"],
[flex-layout~=column][flex-align="stretch start"] {
  align-items: flex-start;
  place-content: flex-start stretch;
}

[flex-layout~=row][flex-align="stretch end"],
[flex-layout~=column][flex-align="stretch end"] {
  align-items: flex-end;
  place-content: flex-end stretch;
}

[flex-layout~=row][flex-align="stretch self-start"],
[flex-layout~=column][flex-align="stretch self-start"] {
  align-items: self-start;
  place-content: self-start stretch;
}

[flex-layout~=row][flex-align="stretch self-end"],
[flex-layout~=column][flex-align="stretch self-end"] {
  align-items: self-end;
  place-content: self-end stretch;
}

[flex-layout~=row][flex-align="stretch baseline"],
[flex-layout~=column][flex-align="stretch baseline"] {
  align-items: baseline;
  place-content: baseline stretch;
}

[flex-layout~=row][flex-align="stretch inherit"],
[flex-layout~=column][flex-align="stretch inherit"] {
  align-items: inherit;
  place-content: inherit stretch;
}

[flex-layout~=row][flex-align="stretch initial"],
[flex-layout~=column][flex-align="stretch initial"] {
  align-items: initial;
  place-content: initial stretch;
}

[flex-layout~=row][flex-align="stretch revert"],
[flex-layout~=column][flex-align="stretch revert"] {
  align-items: revert;
  place-content: revert stretch;
}

[flex-layout~=row][flex-align="stretch revert-layer"],
[flex-layout~=column][flex-align="stretch revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer stretch;
}

[flex-layout~=row][flex-align="stretch unset"],
[flex-layout~=column][flex-align="stretch unset"] {
  align-items: unset;
  place-content: unset stretch;
}

[flex-layout~=row][flex-align="inherit normal"],
[flex-layout~=column][flex-align="inherit normal"] {
  align-items: normal;
  place-content: normal inherit;
}

[flex-layout~=row][flex-align="inherit stretch"],
[flex-layout~=column][flex-align="inherit stretch"] {
  align-items: stretch;
  place-content: stretch inherit;
}

[flex-layout~=row][flex-align="inherit center"],
[flex-layout~=column][flex-align="inherit center"] {
  align-items: center;
  place-content: center inherit;
}

[flex-layout~=row][flex-align="inherit start"],
[flex-layout~=column][flex-align="inherit start"] {
  align-items: flex-start;
  place-content: flex-start inherit;
}

[flex-layout~=row][flex-align="inherit end"],
[flex-layout~=column][flex-align="inherit end"] {
  align-items: flex-end;
  place-content: flex-end inherit;
}

[flex-layout~=row][flex-align="inherit self-start"],
[flex-layout~=column][flex-align="inherit self-start"] {
  align-items: self-start;
  place-content: self-start inherit;
}

[flex-layout~=row][flex-align="inherit self-end"],
[flex-layout~=column][flex-align="inherit self-end"] {
  align-items: self-end;
  place-content: self-end inherit;
}

[flex-layout~=row][flex-align="inherit baseline"],
[flex-layout~=column][flex-align="inherit baseline"] {
  align-items: baseline;
  place-content: baseline inherit;
}

[flex-layout~=row][flex-align="inherit inherit"],
[flex-layout~=column][flex-align="inherit inherit"] {
  align-items: inherit;
  place-content: inherit inherit;
}

[flex-layout~=row][flex-align="inherit initial"],
[flex-layout~=column][flex-align="inherit initial"] {
  align-items: initial;
  place-content: initial inherit;
}

[flex-layout~=row][flex-align="inherit revert"],
[flex-layout~=column][flex-align="inherit revert"] {
  align-items: revert;
  place-content: revert inherit;
}

[flex-layout~=row][flex-align="inherit revert-layer"],
[flex-layout~=column][flex-align="inherit revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer inherit;
}

[flex-layout~=row][flex-align="inherit unset"],
[flex-layout~=column][flex-align="inherit unset"] {
  align-items: unset;
  place-content: unset inherit;
}

[flex-layout~=row][flex-align="initial normal"],
[flex-layout~=column][flex-align="initial normal"] {
  align-items: normal;
  place-content: normal initial;
}

[flex-layout~=row][flex-align="initial stretch"],
[flex-layout~=column][flex-align="initial stretch"] {
  align-items: stretch;
  place-content: stretch initial;
}

[flex-layout~=row][flex-align="initial center"],
[flex-layout~=column][flex-align="initial center"] {
  align-items: center;
  place-content: center initial;
}

[flex-layout~=row][flex-align="initial start"],
[flex-layout~=column][flex-align="initial start"] {
  align-items: flex-start;
  place-content: flex-start initial;
}

[flex-layout~=row][flex-align="initial end"],
[flex-layout~=column][flex-align="initial end"] {
  align-items: flex-end;
  place-content: flex-end initial;
}

[flex-layout~=row][flex-align="initial self-start"],
[flex-layout~=column][flex-align="initial self-start"] {
  align-items: self-start;
  place-content: self-start initial;
}

[flex-layout~=row][flex-align="initial self-end"],
[flex-layout~=column][flex-align="initial self-end"] {
  align-items: self-end;
  place-content: self-end initial;
}

[flex-layout~=row][flex-align="initial baseline"],
[flex-layout~=column][flex-align="initial baseline"] {
  align-items: baseline;
  place-content: baseline initial;
}

[flex-layout~=row][flex-align="initial inherit"],
[flex-layout~=column][flex-align="initial inherit"] {
  align-items: inherit;
  place-content: inherit initial;
}

[flex-layout~=row][flex-align="initial initial"],
[flex-layout~=column][flex-align="initial initial"] {
  align-items: initial;
  place-content: initial initial;
}

[flex-layout~=row][flex-align="initial revert"],
[flex-layout~=column][flex-align="initial revert"] {
  align-items: revert;
  place-content: revert initial;
}

[flex-layout~=row][flex-align="initial revert-layer"],
[flex-layout~=column][flex-align="initial revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer initial;
}

[flex-layout~=row][flex-align="initial unset"],
[flex-layout~=column][flex-align="initial unset"] {
  align-items: unset;
  place-content: unset initial;
}

[flex-layout~=row][flex-align="revert normal"],
[flex-layout~=column][flex-align="revert normal"] {
  align-items: normal;
  place-content: normal revert;
}

[flex-layout~=row][flex-align="revert stretch"],
[flex-layout~=column][flex-align="revert stretch"] {
  align-items: stretch;
  place-content: stretch revert;
}

[flex-layout~=row][flex-align="revert center"],
[flex-layout~=column][flex-align="revert center"] {
  align-items: center;
  place-content: center revert;
}

[flex-layout~=row][flex-align="revert start"],
[flex-layout~=column][flex-align="revert start"] {
  align-items: flex-start;
  place-content: flex-start revert;
}

[flex-layout~=row][flex-align="revert end"],
[flex-layout~=column][flex-align="revert end"] {
  align-items: flex-end;
  place-content: flex-end revert;
}

[flex-layout~=row][flex-align="revert self-start"],
[flex-layout~=column][flex-align="revert self-start"] {
  align-items: self-start;
  place-content: self-start revert;
}

[flex-layout~=row][flex-align="revert self-end"],
[flex-layout~=column][flex-align="revert self-end"] {
  align-items: self-end;
  place-content: self-end revert;
}

[flex-layout~=row][flex-align="revert baseline"],
[flex-layout~=column][flex-align="revert baseline"] {
  align-items: baseline;
  place-content: baseline revert;
}

[flex-layout~=row][flex-align="revert inherit"],
[flex-layout~=column][flex-align="revert inherit"] {
  align-items: inherit;
  place-content: inherit revert;
}

[flex-layout~=row][flex-align="revert initial"],
[flex-layout~=column][flex-align="revert initial"] {
  align-items: initial;
  place-content: initial revert;
}

[flex-layout~=row][flex-align="revert revert"],
[flex-layout~=column][flex-align="revert revert"] {
  align-items: revert;
  place-content: revert revert;
}

[flex-layout~=row][flex-align="revert revert-layer"],
[flex-layout~=column][flex-align="revert revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer revert;
}

[flex-layout~=row][flex-align="revert unset"],
[flex-layout~=column][flex-align="revert unset"] {
  align-items: unset;
  place-content: unset revert;
}

[flex-layout~=row][flex-align="revert-layer normal"],
[flex-layout~=column][flex-align="revert-layer normal"] {
  align-items: normal;
  place-content: normal revert-layer;
}

[flex-layout~=row][flex-align="revert-layer stretch"],
[flex-layout~=column][flex-align="revert-layer stretch"] {
  align-items: stretch;
  place-content: stretch revert-layer;
}

[flex-layout~=row][flex-align="revert-layer center"],
[flex-layout~=column][flex-align="revert-layer center"] {
  align-items: center;
  place-content: center revert-layer;
}

[flex-layout~=row][flex-align="revert-layer start"],
[flex-layout~=column][flex-align="revert-layer start"] {
  align-items: flex-start;
  place-content: flex-start revert-layer;
}

[flex-layout~=row][flex-align="revert-layer end"],
[flex-layout~=column][flex-align="revert-layer end"] {
  align-items: flex-end;
  place-content: flex-end revert-layer;
}

[flex-layout~=row][flex-align="revert-layer self-start"],
[flex-layout~=column][flex-align="revert-layer self-start"] {
  align-items: self-start;
  place-content: self-start revert-layer;
}

[flex-layout~=row][flex-align="revert-layer self-end"],
[flex-layout~=column][flex-align="revert-layer self-end"] {
  align-items: self-end;
  place-content: self-end revert-layer;
}

[flex-layout~=row][flex-align="revert-layer baseline"],
[flex-layout~=column][flex-align="revert-layer baseline"] {
  align-items: baseline;
  place-content: baseline revert-layer;
}

[flex-layout~=row][flex-align="revert-layer inherit"],
[flex-layout~=column][flex-align="revert-layer inherit"] {
  align-items: inherit;
  place-content: inherit revert-layer;
}

[flex-layout~=row][flex-align="revert-layer initial"],
[flex-layout~=column][flex-align="revert-layer initial"] {
  align-items: initial;
  place-content: initial revert-layer;
}

[flex-layout~=row][flex-align="revert-layer revert"],
[flex-layout~=column][flex-align="revert-layer revert"] {
  align-items: revert;
  place-content: revert revert-layer;
}

[flex-layout~=row][flex-align="revert-layer revert-layer"],
[flex-layout~=column][flex-align="revert-layer revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer revert-layer;
}

[flex-layout~=row][flex-align="revert-layer unset"],
[flex-layout~=column][flex-align="revert-layer unset"] {
  align-items: unset;
  place-content: unset revert-layer;
}

[flex-layout~=row][flex-align="unset normal"],
[flex-layout~=column][flex-align="unset normal"] {
  align-items: normal;
  place-content: normal unset;
}

[flex-layout~=row][flex-align="unset stretch"],
[flex-layout~=column][flex-align="unset stretch"] {
  align-items: stretch;
  place-content: stretch unset;
}

[flex-layout~=row][flex-align="unset center"],
[flex-layout~=column][flex-align="unset center"] {
  align-items: center;
  place-content: center unset;
}

[flex-layout~=row][flex-align="unset start"],
[flex-layout~=column][flex-align="unset start"] {
  align-items: flex-start;
  place-content: flex-start unset;
}

[flex-layout~=row][flex-align="unset end"],
[flex-layout~=column][flex-align="unset end"] {
  align-items: flex-end;
  place-content: flex-end unset;
}

[flex-layout~=row][flex-align="unset self-start"],
[flex-layout~=column][flex-align="unset self-start"] {
  align-items: self-start;
  place-content: self-start unset;
}

[flex-layout~=row][flex-align="unset self-end"],
[flex-layout~=column][flex-align="unset self-end"] {
  align-items: self-end;
  place-content: self-end unset;
}

[flex-layout~=row][flex-align="unset baseline"],
[flex-layout~=column][flex-align="unset baseline"] {
  align-items: baseline;
  place-content: baseline unset;
}

[flex-layout~=row][flex-align="unset inherit"],
[flex-layout~=column][flex-align="unset inherit"] {
  align-items: inherit;
  place-content: inherit unset;
}

[flex-layout~=row][flex-align="unset initial"],
[flex-layout~=column][flex-align="unset initial"] {
  align-items: initial;
  place-content: initial unset;
}

[flex-layout~=row][flex-align="unset revert"],
[flex-layout~=column][flex-align="unset revert"] {
  align-items: revert;
  place-content: revert unset;
}

[flex-layout~=row][flex-align="unset revert-layer"],
[flex-layout~=column][flex-align="unset revert-layer"] {
  align-items: revert-layer;
  place-content: revert-layer unset;
}

[flex-layout~=row][flex-align="unset unset"],
[flex-layout~=column][flex-align="unset unset"] {
  align-items: unset;
  place-content: unset unset;
}

[flex-gap=sm][flex-layout~=column] > *:not(:last-child) {
  margin-bottom: 8px;
}
[flex-gap=sm][flex-layout~=row] > *:not(:last-child) {
  margin-right: 8px;
}

[flex-gap=md][flex-layout~=column] > *:not(:last-child) {
  margin-bottom: 16px;
}
[flex-gap=md][flex-layout~=row] > *:not(:last-child) {
  margin-right: 16px;
}

[flex-gap=lg][flex-layout~=column] > *:not(:last-child) {
  margin-bottom: 24px;
}
[flex-gap=lg][flex-layout~=row] > *:not(:last-child) {
  margin-right: 24px;
}

[flex-gap-top] {
  margin-top: auto;
}

[flex-gap-right] {
  margin-right: auto;
}

[flex-gap-bottom] {
  margin-bottom: auto;
}

[flex-gap-left] {
  margin-left: auto;
}

[flex-gap-top=sm] {
  margin-top: 8px;
}

[flex-gap-top=md] {
  margin-top: 16px;
}

[flex-gap-top=lg] {
  margin-top: 24px;
}

[flex-gap-right] {
  margin-right: auto;
}

[flex-gap-right=sm] {
  margin-right: 8px;
}

[flex-gap-right=md] {
  margin-right: 16px;
}

[flex-gap-right=lg] {
  margin-right: 24px;
}

[flex-gap-top=sm] {
  margin-top: 8px;
}

[flex-gap-top=md] {
  margin-top: 16px;
}

[flex-gap-top=lg] {
  margin-top: 24px;
}

[flex-gap-top=sm] {
  margin-top: 8px;
}

[flex-gap-top=md] {
  margin-top: 16px;
}

[flex-gap-top=lg] {
  margin-top: 24px;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.32.12",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}