@layer layouts {

/* ———— layout flow */

    div-flow{
        width: 100%;
        max-width: 100%;
        gap: attr(gap type(<length> | <percentage>), 0px)
    }

    /* ———— layout flow x */

    div-flow[axis~="x"] {
        display: flex;
        justify-content: space-between;
        align-content: center;
    }

    div-flow[axis~="x"][type~="loose"]{
        flex-flow: row wrap;
    }
    div-flow[axis~="x"][type~="unwrap"]{
        flex-flow: nowrap;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        overflow: auto clip;
        height: fit-content;
    }


    /* ———— layout flow x options */


    div-flow[axis~="x"]>.--growed-content,
    div-flow[axis~="x"].--growed-contents>* {
        flex-grow:1
    }

    div-flow[axis~="x"]>.--stretch-content,
    div-flow[axis~="x"].--stretch-contents>* {
        height: 100%;
        display: flex;
    }

    div-flow[axis~="x"]>.--fit-content,
    div-flow[axis~="x"].--fit-contents>* {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-inline-size: fit-content;
    }

    div-flow[type~="unwrap"].--snap-in-start>*{
        scroll-snap-align: start;
    }

    div-flow[type~="unwrap"]>*,
    div-flow[type~="unwrap"].--snap-in-center>*{
        scroll-snap-align: center;
    }

    div-flow[type~="unwrap"].--snap-in-end>*{
        scroll-snap-align: end;
    }


    /* ———— layout flow x alignment */
    div-flow[axis~="x"].--top-center {
        align-items: start;
        justify-content: center;
    }

    div-flow[axis~="x"].--top-left {
        align-items: start;
        justify-content: start;
    }

    div-flow[axis~="x"].--top-right {
        align-items: start;
        justify-content: end;
    }

    div-flow[axis~="x"].--top-distributed {
        align-items: start;
        justify-content: space-between;
    }
    div-flow[axis~="x"].--middle-center {
        align-items: center;
        justify-content: center;
    }

    div-flow[axis~="x"].--middle-left {
        align-items: center;
        justify-content: start;
    }

    div-flow[axis~="x"].--middle-right {
        align-items: center;
        justify-content: end;
    }
    div-flow[axis~="x"].--middle-distributed {
        align-items: center;
        justify-content: space-between;
    }
    div-flow[axis~="x"].--bottom-center {
        align-items: end;
        justify-content: center;
    }

    div-flow[axis~="x"].--bottom-left {
        align-items: end;
        justify-content: start;
    }

    div-flow[axis~="x"].--bottom-right {
        align-items: end;
        justify-content: end;
    }

    div-flow[axis~="x"].--bottom-distributed {
        align-items: end;
        justify-content: space-between;
    }


    /* ———— layout flow y */


    div-flow[axis~="y"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    div-flow[axis~="y"][type~="loose"]{
        flex-wrap: wrap;
    }

    div-flow[axis~="y"][type~="unwrap"]{
        flex-wrap: nowrap;
        overflow: clip auto;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
    }

    /* ———— layout flow y options */


    div-flow[axis~="y"]>.--stretch-content,
    div-flow[axis~="y"].--stretch-contents>* {
        width: 100%;
        display: flex;
    }

    div-flow[axis~="y"]>.--fit-content,
    div-flow[axis~="y"].--fit-contents>* {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    /* ———— layout flow y alignment */
    div-flow[axis~="y"].--top-center {
        align-items: center;
        justify-content: start;
    }

    div-flow[axis~="y"].--top-left {
        align-items: start;
        justify-content: start;
    }

    div-flow[axis~="y"].--top-right {
        align-items: end;
        justify-content: start;
    }

    div-flow[axis~="y"].--top-distributed {
        align-items: start;
        justify-content: space-between;
    }
    div-flow[axis~="y"].--middle-center {
        align-items: center;
        justify-content: center;
    }

    div-flow[axis~="y"].--middle-left {
        align-items: start;
        justify-content: center;
    }

    div-flow[axis~="y"].--middle-right {
        align-items: end;
        justify-content: center;
    }
    div-flow[axis~="y"].--middle-distributed {
        align-items: center;
        justify-content: space-between;
    }
    div-flow[axis~="y"].--bottom-center {
        align-items: center;
        justify-content: end;
    }

    div-flow[axis~="y"].--bottom-left {
        align-items: start;
        justify-content: end;
    }

    div-flow[axis~="y"].--bottom-right {
        align-items: end;
        justify-content: end;
    }

    div-flow[axis~="y"].--bottom-distributed {
        align-items: end;
        justify-content: space-between;
    }


    /* ---- custs options */


    @media only screen and (min-width: 1920px) {

        div-flow>[size~="x-l-0"]  { width: 0; display:none }
        div-flow>[size~="x-l-1"]  { width: 1% }  div-flow>[size~="x-l-11"]  { width: 11% }  div-flow>[size~="x-l-21"]  { width: 21% }  div-flow>[size~="x-l-31"]  { width: 31% }  div-flow>[size~="x-l-41"]  { width: 41% }  div-flow>[size~="x-l-51"]  { width: 51% }  div-flow>[size~="x-l-61"]  { width: 61% }  div-flow>[size~="x-l-71"]  { width: 71% }  div-flow>[size~="x-l-81"]  { width: 81% }  div-flow>[size~="x-l-91"]  { width: 91% }
        div-flow>[size~="x-l-2"]  { width: 2% }  div-flow>[size~="x-l-12"]  { width: 12% }  div-flow>[size~="x-l-22"]  { width: 22% }  div-flow>[size~="x-l-32"]  { width: 32% }  div-flow>[size~="x-l-42"]  { width: 42% }  div-flow>[size~="x-l-52"]  { width: 52% }  div-flow>[size~="x-l-62"]  { width: 62% }  div-flow>[size~="x-l-72"]  { width: 72% }  div-flow>[size~="x-l-82"]  { width: 82% }  div-flow>[size~="x-l-92"]  { width: 92% }
        div-flow>[size~="x-l-3"]  { width: 3% }  div-flow>[size~="x-l-13"]  { width: 13% }  div-flow>[size~="x-l-23"]  { width: 23% }  div-flow>[size~="x-l-33"]  { width: 33% }  div-flow>[size~="x-l-43"]  { width: 43% }  div-flow>[size~="x-l-53"]  { width: 53% }  div-flow>[size~="x-l-63"]  { width: 63% }  div-flow>[size~="x-l-73"]  { width: 73% }  div-flow>[size~="x-l-83"]  { width: 83% }  div-flow>[size~="x-l-93"]  { width: 93% }
        div-flow>[size~="x-l-4"]  { width: 4% }  div-flow>[size~="x-l-14"]  { width: 14% }  div-flow>[size~="x-l-24"]  { width: 24% }  div-flow>[size~="x-l-34"]  { width: 34% }  div-flow>[size~="x-l-44"]  { width: 44% }  div-flow>[size~="x-l-54"]  { width: 54% }  div-flow>[size~="x-l-64"]  { width: 64% }  div-flow>[size~="x-l-74"]  { width: 74% }  div-flow>[size~="x-l-84"]  { width: 84% }  div-flow>[size~="x-l-94"]  { width: 94% }
        div-flow>[size~="x-l-5"]  { width: 5% }  div-flow>[size~="x-l-15"]  { width: 15% }  div-flow>[size~="x-l-25"]  { width: 25% }  div-flow>[size~="x-l-35"]  { width: 35% }  div-flow>[size~="x-l-45"]  { width: 45% }  div-flow>[size~="x-l-55"]  { width: 55% }  div-flow>[size~="x-l-65"]  { width: 65% }  div-flow>[size~="x-l-75"]  { width: 75% }  div-flow>[size~="x-l-85"]  { width: 85% }  div-flow>[size~="x-l-95"]  { width: 95% }
        div-flow>[size~="x-l-6"]  { width: 6% }  div-flow>[size~="x-l-16"]  { width: 16% }  div-flow>[size~="x-l-26"]  { width: 26% }  div-flow>[size~="x-l-36"]  { width: 36% }  div-flow>[size~="x-l-46"]  { width: 46% }  div-flow>[size~="x-l-56"]  { width: 56% }  div-flow>[size~="x-l-66"]  { width: 66% }  div-flow>[size~="x-l-76"]  { width: 76% }  div-flow>[size~="x-l-86"]  { width: 86% }  div-flow>[size~="x-l-96"]  { width: 96% }
        div-flow>[size~="x-l-7"]  { width: 7% }  div-flow>[size~="x-l-17"]  { width: 17% }  div-flow>[size~="x-l-27"]  { width: 27% }  div-flow>[size~="x-l-37"]  { width: 37% }  div-flow>[size~="x-l-47"]  { width: 47% }  div-flow>[size~="x-l-57"]  { width: 57% }  div-flow>[size~="x-l-67"]  { width: 67% }  div-flow>[size~="x-l-77"]  { width: 77% }  div-flow>[size~="x-l-87"]  { width: 87% }  div-flow>[size~="x-l-97"]  { width: 97% }
        div-flow>[size~="x-l-8"]  { width: 8% }  div-flow>[size~="x-l-18"]  { width: 18% }  div-flow>[size~="x-l-28"]  { width: 28% }  div-flow>[size~="x-l-38"]  { width: 38% }  div-flow>[size~="x-l-48"]  { width: 48% }  div-flow>[size~="x-l-58"]  { width: 58% }  div-flow>[size~="x-l-68"]  { width: 68% }  div-flow>[size~="x-l-78"]  { width: 78% }  div-flow>[size~="x-l-88"]  { width: 88% }  div-flow>[size~="x-l-98"]  { width: 98% }
        div-flow>[size~="x-l-9"]  { width: 9% }  div-flow>[size~="x-l-19"]  { width: 19% }  div-flow>[size~="x-l-29"]  { width: 29% }  div-flow>[size~="x-l-39"]  { width: 39% }  div-flow>[size~="x-l-49"]  { width: 49% }  div-flow>[size~="x-l-59"]  { width: 59% }  div-flow>[size~="x-l-69"]  { width: 69% }  div-flow>[size~="x-l-79"]  { width: 79% }  div-flow>[size~="x-l-89"]  { width: 89% }  div-flow>[size~="x-l-99"]  { width: 99% }
        div-flow>[size~="x-l-10"] { width: 10% } div-flow>[size~="x-l-20"]  { width: 20% }  div-flow>[size~="x-l-30"]  { width: 30% }  div-flow>[size~="x-l-40"]  { width: 40% }  div-flow>[size~="x-l-50"]  { width: 50% }  div-flow>[size~="x-l-60"]  { width: 60% }  div-flow>[size~="x-l-70"]  { width: 70% }  div-flow>[size~="x-l-80"]  { width: 80% }  div-flow>[size~="x-l-90"]  { width: 90% }  div-flow>[size~="x-l-100"] { width: 100% }

        div-flow>[size~="y-l-0"]  { height: 0; display:none }
        div-flow>[size~="y-l-1"]  { height: 1% }  div-flow>[size~="y-l-11"]  { height: 11% }  div-flow>[size~="y-l-21"]  { height: 21% }  div-flow>[size~="y-l-31"]  { height: 31% }  div-flow>[size~="y-l-41"]  { height: 41% }  div-flow>[size~="y-l-51"]  { height: 51% }  div-flow>[size~="y-l-61"]  { height: 61% }  div-flow>[size~="y-l-71"]  { height: 71% }  div-flow>[size~="y-l-81"]  { height: 81% }  div-flow>[size~="y-l-91"]  { height: 91% }
        div-flow>[size~="y-l-2"]  { height: 2% }  div-flow>[size~="y-l-12"]  { height: 12% }  div-flow>[size~="y-l-22"]  { height: 22% }  div-flow>[size~="y-l-32"]  { height: 32% }  div-flow>[size~="y-l-42"]  { height: 42% }  div-flow>[size~="y-l-52"]  { height: 52% }  div-flow>[size~="y-l-62"]  { height: 62% }  div-flow>[size~="y-l-72"]  { height: 72% }  div-flow>[size~="y-l-82"]  { height: 82% }  div-flow>[size~="y-l-92"]  { height: 92% }
        div-flow>[size~="y-l-3"]  { height: 3% }  div-flow>[size~="y-l-13"]  { height: 13% }  div-flow>[size~="y-l-23"]  { height: 23% }  div-flow>[size~="y-l-33"]  { height: 33% }  div-flow>[size~="y-l-43"]  { height: 43% }  div-flow>[size~="y-l-53"]  { height: 53% }  div-flow>[size~="y-l-63"]  { height: 63% }  div-flow>[size~="y-l-73"]  { height: 73% }  div-flow>[size~="y-l-83"]  { height: 83% }  div-flow>[size~="y-l-93"]  { height: 93% }
        div-flow>[size~="y-l-4"]  { height: 4% }  div-flow>[size~="y-l-14"]  { height: 14% }  div-flow>[size~="y-l-24"]  { height: 24% }  div-flow>[size~="y-l-34"]  { height: 34% }  div-flow>[size~="y-l-44"]  { height: 44% }  div-flow>[size~="y-l-54"]  { height: 54% }  div-flow>[size~="y-l-64"]  { height: 64% }  div-flow>[size~="y-l-74"]  { height: 74% }  div-flow>[size~="y-l-84"]  { height: 84% }  div-flow>[size~="y-l-94"]  { height: 94% }
        div-flow>[size~="y-l-5"]  { height: 5% }  div-flow>[size~="y-l-15"]  { height: 15% }  div-flow>[size~="y-l-25"]  { height: 25% }  div-flow>[size~="y-l-35"]  { height: 35% }  div-flow>[size~="y-l-45"]  { height: 45% }  div-flow>[size~="y-l-55"]  { height: 55% }  div-flow>[size~="y-l-65"]  { height: 65% }  div-flow>[size~="y-l-75"]  { height: 75% }  div-flow>[size~="y-l-85"]  { height: 85% }  div-flow>[size~="y-l-95"]  { height: 95% }
        div-flow>[size~="y-l-6"]  { height: 6% }  div-flow>[size~="y-l-16"]  { height: 16% }  div-flow>[size~="y-l-26"]  { height: 26% }  div-flow>[size~="y-l-36"]  { height: 36% }  div-flow>[size~="y-l-46"]  { height: 46% }  div-flow>[size~="y-l-56"]  { height: 56% }  div-flow>[size~="y-l-66"]  { height: 66% }  div-flow>[size~="y-l-76"]  { height: 76% }  div-flow>[size~="y-l-86"]  { height: 86% }  div-flow>[size~="y-l-96"]  { height: 96% }
        div-flow>[size~="y-l-7"]  { height: 7% }  div-flow>[size~="y-l-17"]  { height: 17% }  div-flow>[size~="y-l-27"]  { height: 27% }  div-flow>[size~="y-l-37"]  { height: 37% }  div-flow>[size~="y-l-47"]  { height: 47% }  div-flow>[size~="y-l-57"]  { height: 57% }  div-flow>[size~="y-l-67"]  { height: 67% }  div-flow>[size~="y-l-77"]  { height: 77% }  div-flow>[size~="y-l-87"]  { height: 87% }  div-flow>[size~="y-l-97"]  { height: 97% }
        div-flow>[size~="y-l-8"]  { height: 8% }  div-flow>[size~="y-l-18"]  { height: 18% }  div-flow>[size~="y-l-28"]  { height: 28% }  div-flow>[size~="y-l-38"]  { height: 38% }  div-flow>[size~="y-l-48"]  { height: 48% }  div-flow>[size~="y-l-58"]  { height: 58% }  div-flow>[size~="y-l-68"]  { height: 68% }  div-flow>[size~="y-l-78"]  { height: 78% }  div-flow>[size~="y-l-88"]  { height: 88% }  div-flow>[size~="y-l-98"]  { height: 98% }
        div-flow>[size~="y-l-9"]  { height: 9% }  div-flow>[size~="y-l-19"]  { height: 19% }  div-flow>[size~="y-l-29"]  { height: 29% }  div-flow>[size~="y-l-39"]  { height: 39% }  div-flow>[size~="y-l-49"]  { height: 49% }  div-flow>[size~="y-l-59"]  { height: 59% }  div-flow>[size~="y-l-69"]  { height: 69% }  div-flow>[size~="y-l-79"]  { height: 79% }  div-flow>[size~="y-l-89"]  { height: 89% }  div-flow>[size~="y-l-99"]  { height: 99% }
        div-flow>[size~="y-l-10"] { height: 10% } div-flow>[size~="y-l-20"]  { height: 20% }  div-flow>[size~="y-l-30"]  { height: 30% }  div-flow>[size~="y-l-40"]  { height: 40% }  div-flow>[size~="y-l-50"]  { height: 50% }  div-flow>[size~="y-l-60"]  { height: 60% }  div-flow>[size~="y-l-70"]  { height: 70% }  div-flow>[size~="y-l-80"]  { height: 80% }  div-flow>[size~="y-l-90"]  { height: 90% }  div-flow>[size~="y-l-100"] { height: 100% }

    }

    @media only screen and (min-width: 755px) and (max-width : 1920px) {

        div-flow>[size~="x-m-0"]  { width: 0; display:none }
        div-flow>[size~="x-m-1"]  { width: 1% }  div-flow>[size~="x-m-11"]  { width: 11% }  div-flow>[size~="x-m-21"]  { width: 21% }  div-flow>[size~="x-m-31"]  { width: 31% }  div-flow>[size~="x-m-41"]  { width: 41% }  div-flow>[size~="x-m-51"]  { width: 51% }  div-flow>[size~="x-m-61"]  { width: 61% }  div-flow>[size~="x-m-71"]  { width: 71% }  div-flow>[size~="x-m-81"]  { width: 81% }  div-flow>[size~="x-m-91"]  { width: 91% }
        div-flow>[size~="x-m-2"]  { width: 2% }  div-flow>[size~="x-m-12"]  { width: 12% }  div-flow>[size~="x-m-22"]  { width: 22% }  div-flow>[size~="x-m-32"]  { width: 32% }  div-flow>[size~="x-m-42"]  { width: 42% }  div-flow>[size~="x-m-52"]  { width: 52% }  div-flow>[size~="x-m-62"]  { width: 62% }  div-flow>[size~="x-m-72"]  { width: 72% }  div-flow>[size~="x-m-82"]  { width: 82% }  div-flow>[size~="x-m-92"]  { width: 92% }
        div-flow>[size~="x-m-3"]  { width: 3% }  div-flow>[size~="x-m-13"]  { width: 13% }  div-flow>[size~="x-m-23"]  { width: 23% }  div-flow>[size~="x-m-33"]  { width: 33% }  div-flow>[size~="x-m-43"]  { width: 43% }  div-flow>[size~="x-m-53"]  { width: 53% }  div-flow>[size~="x-m-63"]  { width: 63% }  div-flow>[size~="x-m-73"]  { width: 73% }  div-flow>[size~="x-m-83"]  { width: 83% }  div-flow>[size~="x-m-93"]  { width: 93% }
        div-flow>[size~="x-m-4"]  { width: 4% }  div-flow>[size~="x-m-14"]  { width: 14% }  div-flow>[size~="x-m-24"]  { width: 24% }  div-flow>[size~="x-m-34"]  { width: 34% }  div-flow>[size~="x-m-44"]  { width: 44% }  div-flow>[size~="x-m-54"]  { width: 54% }  div-flow>[size~="x-m-64"]  { width: 64% }  div-flow>[size~="x-m-74"]  { width: 74% }  div-flow>[size~="x-m-84"]  { width: 84% }  div-flow>[size~="x-m-94"]  { width: 94% }
        div-flow>[size~="x-m-5"]  { width: 5% }  div-flow>[size~="x-m-15"]  { width: 15% }  div-flow>[size~="x-m-25"]  { width: 25% }  div-flow>[size~="x-m-35"]  { width: 35% }  div-flow>[size~="x-m-45"]  { width: 45% }  div-flow>[size~="x-m-55"]  { width: 55% }  div-flow>[size~="x-m-65"]  { width: 65% }  div-flow>[size~="x-m-75"]  { width: 75% }  div-flow>[size~="x-m-85"]  { width: 85% }  div-flow>[size~="x-m-95"]  { width: 95% }
        div-flow>[size~="x-m-6"]  { width: 6% }  div-flow>[size~="x-m-16"]  { width: 16% }  div-flow>[size~="x-m-26"]  { width: 26% }  div-flow>[size~="x-m-36"]  { width: 36% }  div-flow>[size~="x-m-46"]  { width: 46% }  div-flow>[size~="x-m-56"]  { width: 56% }  div-flow>[size~="x-m-66"]  { width: 66% }  div-flow>[size~="x-m-76"]  { width: 76% }  div-flow>[size~="x-m-86"]  { width: 86% }  div-flow>[size~="x-m-96"]  { width: 96% }
        div-flow>[size~="x-m-7"]  { width: 7% }  div-flow>[size~="x-m-17"]  { width: 17% }  div-flow>[size~="x-m-27"]  { width: 27% }  div-flow>[size~="x-m-37"]  { width: 37% }  div-flow>[size~="x-m-47"]  { width: 47% }  div-flow>[size~="x-m-57"]  { width: 57% }  div-flow>[size~="x-m-67"]  { width: 67% }  div-flow>[size~="x-m-77"]  { width: 77% }  div-flow>[size~="x-m-87"]  { width: 87% }  div-flow>[size~="x-m-97"]  { width: 97% }
        div-flow>[size~="x-m-8"]  { width: 8% }  div-flow>[size~="x-m-18"]  { width: 18% }  div-flow>[size~="x-m-28"]  { width: 28% }  div-flow>[size~="x-m-38"]  { width: 38% }  div-flow>[size~="x-m-48"]  { width: 48% }  div-flow>[size~="x-m-58"]  { width: 58% }  div-flow>[size~="x-m-68"]  { width: 68% }  div-flow>[size~="x-m-78"]  { width: 78% }  div-flow>[size~="x-m-88"]  { width: 88% }  div-flow>[size~="x-m-98"]  { width: 98% }
        div-flow>[size~="x-m-9"]  { width: 9% }  div-flow>[size~="x-m-19"]  { width: 19% }  div-flow>[size~="x-m-29"]  { width: 29% }  div-flow>[size~="x-m-39"]  { width: 39% }  div-flow>[size~="x-m-49"]  { width: 49% }  div-flow>[size~="x-m-59"]  { width: 59% }  div-flow>[size~="x-m-69"]  { width: 69% }  div-flow>[size~="x-m-79"]  { width: 79% }  div-flow>[size~="x-m-89"]  { width: 89% }  div-flow>[size~="x-m-99"]  { width: 99% }
        div-flow>[size~="x-m-10"] { width: 10% } div-flow>[size~="x-m-20"]  { width: 20% }  div-flow>[size~="x-m-30"]  { width: 30% }  div-flow>[size~="x-m-40"]  { width: 40% }  div-flow>[size~="x-m-50"]  { width: 50% }  div-flow>[size~="x-m-60"]  { width: 60% }  div-flow>[size~="x-m-70"]  { width: 70% }  div-flow>[size~="x-m-80"]  { width: 80% }  div-flow>[size~="x-m-90"]  { width: 90% }  div-flow>[size~="x-m-100"] { width: 100% }

        div-flow>[size~="y-m-0"]  { height: 0; display:none }
        div-flow>[size~="y-m-1"]  { height: 1% }  div-flow>[size~="y-m-11"]  { height: 11% }  div-flow>[size~="y-m-21"]  { height: 21% }  div-flow>[size~="y-m-31"]  { height: 31% }  div-flow>[size~="y-m-41"]  { height: 41% }  div-flow>[size~="y-m-51"]  { height: 51% }  div-flow>[size~="y-m-61"]  { height: 61% }  div-flow>[size~="y-m-71"]  { height: 71% }  div-flow>[size~="y-m-81"]  { height: 81% }  div-flow>[size~="y-m-91"]  { height: 91% }
        div-flow>[size~="y-m-2"]  { height: 2% }  div-flow>[size~="y-m-12"]  { height: 12% }  div-flow>[size~="y-m-22"]  { height: 22% }  div-flow>[size~="y-m-32"]  { height: 32% }  div-flow>[size~="y-m-42"]  { height: 42% }  div-flow>[size~="y-m-52"]  { height: 52% }  div-flow>[size~="y-m-62"]  { height: 62% }  div-flow>[size~="y-m-72"]  { height: 72% }  div-flow>[size~="y-m-82"]  { height: 82% }  div-flow>[size~="y-m-92"]  { height: 92% }
        div-flow>[size~="y-m-3"]  { height: 3% }  div-flow>[size~="y-m-13"]  { height: 13% }  div-flow>[size~="y-m-23"]  { height: 23% }  div-flow>[size~="y-m-33"]  { height: 33% }  div-flow>[size~="y-m-43"]  { height: 43% }  div-flow>[size~="y-m-53"]  { height: 53% }  div-flow>[size~="y-m-63"]  { height: 63% }  div-flow>[size~="y-m-73"]  { height: 73% }  div-flow>[size~="y-m-83"]  { height: 83% }  div-flow>[size~="y-m-93"]  { height: 93% }
        div-flow>[size~="y-m-4"]  { height: 4% }  div-flow>[size~="y-m-14"]  { height: 14% }  div-flow>[size~="y-m-24"]  { height: 24% }  div-flow>[size~="y-m-34"]  { height: 34% }  div-flow>[size~="y-m-44"]  { height: 44% }  div-flow>[size~="y-m-54"]  { height: 54% }  div-flow>[size~="y-m-64"]  { height: 64% }  div-flow>[size~="y-m-74"]  { height: 74% }  div-flow>[size~="y-m-84"]  { height: 84% }  div-flow>[size~="y-m-94"]  { height: 94% }
        div-flow>[size~="y-m-5"]  { height: 5% }  div-flow>[size~="y-m-15"]  { height: 15% }  div-flow>[size~="y-m-25"]  { height: 25% }  div-flow>[size~="y-m-35"]  { height: 35% }  div-flow>[size~="y-m-45"]  { height: 45% }  div-flow>[size~="y-m-55"]  { height: 55% }  div-flow>[size~="y-m-65"]  { height: 65% }  div-flow>[size~="y-m-75"]  { height: 75% }  div-flow>[size~="y-m-85"]  { height: 85% }  div-flow>[size~="y-m-95"]  { height: 95% }
        div-flow>[size~="y-m-6"]  { height: 6% }  div-flow>[size~="y-m-16"]  { height: 16% }  div-flow>[size~="y-m-26"]  { height: 26% }  div-flow>[size~="y-m-36"]  { height: 36% }  div-flow>[size~="y-m-46"]  { height: 46% }  div-flow>[size~="y-m-56"]  { height: 56% }  div-flow>[size~="y-m-66"]  { height: 66% }  div-flow>[size~="y-m-76"]  { height: 76% }  div-flow>[size~="y-m-86"]  { height: 86% }  div-flow>[size~="y-m-96"]  { height: 96% }
        div-flow>[size~="y-m-7"]  { height: 7% }  div-flow>[size~="y-m-17"]  { height: 17% }  div-flow>[size~="y-m-27"]  { height: 27% }  div-flow>[size~="y-m-37"]  { height: 37% }  div-flow>[size~="y-m-47"]  { height: 47% }  div-flow>[size~="y-m-57"]  { height: 57% }  div-flow>[size~="y-m-67"]  { height: 67% }  div-flow>[size~="y-m-77"]  { height: 77% }  div-flow>[size~="y-m-87"]  { height: 87% }  div-flow>[size~="y-m-97"]  { height: 97% }
        div-flow>[size~="y-m-8"]  { height: 8% }  div-flow>[size~="y-m-18"]  { height: 18% }  div-flow>[size~="y-m-28"]  { height: 28% }  div-flow>[size~="y-m-38"]  { height: 38% }  div-flow>[size~="y-m-48"]  { height: 48% }  div-flow>[size~="y-m-58"]  { height: 58% }  div-flow>[size~="y-m-68"]  { height: 68% }  div-flow>[size~="y-m-78"]  { height: 78% }  div-flow>[size~="y-m-88"]  { height: 88% }  div-flow>[size~="y-m-98"]  { height: 98% }
        div-flow>[size~="y-m-9"]  { height: 9% }  div-flow>[size~="y-m-19"]  { height: 19% }  div-flow>[size~="y-m-29"]  { height: 29% }  div-flow>[size~="y-m-39"]  { height: 39% }  div-flow>[size~="y-m-49"]  { height: 49% }  div-flow>[size~="y-m-59"]  { height: 59% }  div-flow>[size~="y-m-69"]  { height: 69% }  div-flow>[size~="y-m-79"]  { height: 79% }  div-flow>[size~="y-m-89"]  { height: 89% }  div-flow>[size~="y-m-99"]  { height: 99% }
        div-flow>[size~="y-m-10"] { height: 10% } div-flow>[size~="y-m-20"]  { height: 20% }  div-flow>[size~="y-m-30"]  { height: 30% }  div-flow>[size~="y-m-40"]  { height: 40% }  div-flow>[size~="y-m-50"]  { height: 50% }  div-flow>[size~="y-m-60"]  { height: 60% }  div-flow>[size~="y-m-70"]  { height: 70% }  div-flow>[size~="y-m-80"]  { height: 80% }  div-flow>[size~="y-m-90"]  { height: 90% }  div-flow>[size~="y-m-100"] { height: 100% }

    }

    @media only screen and (max-width: 755px) {

        div-flow>[size~="x-s-0"]  { width: 0; display:none }
        div-flow>[size~="x-s-1"]  { width: 1% }  div-flow>[size~="x-s-11"]  { width: 11% }  div-flow>[size~="x-s-21"]  { width: 21% }  div-flow>[size~="x-s-31"]  { width: 31% }  div-flow>[size~="x-s-41"]  { width: 41% }  div-flow>[size~="x-s-51"]  { width: 51% }  div-flow>[size~="x-s-61"]  { width: 61% }  div-flow>[size~="x-s-71"]  { width: 71% }  div-flow>[size~="x-s-81"]  { width: 81% }  div-flow>[size~="x-s-91"]  { width: 91% }
        div-flow>[size~="x-s-2"]  { width: 2% }  div-flow>[size~="x-s-12"]  { width: 12% }  div-flow>[size~="x-s-22"]  { width: 22% }  div-flow>[size~="x-s-32"]  { width: 32% }  div-flow>[size~="x-s-42"]  { width: 42% }  div-flow>[size~="x-s-52"]  { width: 52% }  div-flow>[size~="x-s-62"]  { width: 62% }  div-flow>[size~="x-s-72"]  { width: 72% }  div-flow>[size~="x-s-82"]  { width: 82% }  div-flow>[size~="x-s-92"]  { width: 92% }
        div-flow>[size~="x-s-3"]  { width: 3% }  div-flow>[size~="x-s-13"]  { width: 13% }  div-flow>[size~="x-s-23"]  { width: 23% }  div-flow>[size~="x-s-33"]  { width: 33% }  div-flow>[size~="x-s-43"]  { width: 43% }  div-flow>[size~="x-s-53"]  { width: 53% }  div-flow>[size~="x-s-63"]  { width: 63% }  div-flow>[size~="x-s-73"]  { width: 73% }  div-flow>[size~="x-s-83"]  { width: 83% }  div-flow>[size~="x-s-93"]  { width: 93% }
        div-flow>[size~="x-s-4"]  { width: 4% }  div-flow>[size~="x-s-14"]  { width: 14% }  div-flow>[size~="x-s-24"]  { width: 24% }  div-flow>[size~="x-s-34"]  { width: 34% }  div-flow>[size~="x-s-44"]  { width: 44% }  div-flow>[size~="x-s-54"]  { width: 54% }  div-flow>[size~="x-s-64"]  { width: 64% }  div-flow>[size~="x-s-74"]  { width: 74% }  div-flow>[size~="x-s-84"]  { width: 84% }  div-flow>[size~="x-s-94"]  { width: 94% }
        div-flow>[size~="x-s-5"]  { width: 5% }  div-flow>[size~="x-s-15"]  { width: 15% }  div-flow>[size~="x-s-25"]  { width: 25% }  div-flow>[size~="x-s-35"]  { width: 35% }  div-flow>[size~="x-s-45"]  { width: 45% }  div-flow>[size~="x-s-55"]  { width: 55% }  div-flow>[size~="x-s-65"]  { width: 65% }  div-flow>[size~="x-s-75"]  { width: 75% }  div-flow>[size~="x-s-85"]  { width: 85% }  div-flow>[size~="x-s-95"]  { width: 95% }
        div-flow>[size~="x-s-6"]  { width: 6% }  div-flow>[size~="x-s-16"]  { width: 16% }  div-flow>[size~="x-s-26"]  { width: 26% }  div-flow>[size~="x-s-36"]  { width: 36% }  div-flow>[size~="x-s-46"]  { width: 46% }  div-flow>[size~="x-s-56"]  { width: 56% }  div-flow>[size~="x-s-66"]  { width: 66% }  div-flow>[size~="x-s-76"]  { width: 76% }  div-flow>[size~="x-s-86"]  { width: 86% }  div-flow>[size~="x-s-96"]  { width: 96% }
        div-flow>[size~="x-s-7"]  { width: 7% }  div-flow>[size~="x-s-17"]  { width: 17% }  div-flow>[size~="x-s-27"]  { width: 27% }  div-flow>[size~="x-s-37"]  { width: 37% }  div-flow>[size~="x-s-47"]  { width: 47% }  div-flow>[size~="x-s-57"]  { width: 57% }  div-flow>[size~="x-s-67"]  { width: 67% }  div-flow>[size~="x-s-77"]  { width: 77% }  div-flow>[size~="x-s-87"]  { width: 87% }  div-flow>[size~="x-s-97"]  { width: 97% }
        div-flow>[size~="x-s-8"]  { width: 8% }  div-flow>[size~="x-s-18"]  { width: 18% }  div-flow>[size~="x-s-28"]  { width: 28% }  div-flow>[size~="x-s-38"]  { width: 38% }  div-flow>[size~="x-s-48"]  { width: 48% }  div-flow>[size~="x-s-58"]  { width: 58% }  div-flow>[size~="x-s-68"]  { width: 68% }  div-flow>[size~="x-s-78"]  { width: 78% }  div-flow>[size~="x-s-88"]  { width: 88% }  div-flow>[size~="x-s-98"]  { width: 98% }
        div-flow>[size~="x-s-9"]  { width: 9% }  div-flow>[size~="x-s-19"]  { width: 19% }  div-flow>[size~="x-s-29"]  { width: 29% }  div-flow>[size~="x-s-39"]  { width: 39% }  div-flow>[size~="x-s-49"]  { width: 49% }  div-flow>[size~="x-s-59"]  { width: 59% }  div-flow>[size~="x-s-69"]  { width: 69% }  div-flow>[size~="x-s-79"]  { width: 79% }  div-flow>[size~="x-s-89"]  { width: 89% }  div-flow>[size~="x-s-99"]  { width: 99% }
        div-flow>[size~="x-s-10"] { width: 10% } div-flow>[size~="x-s-20"]  { width: 20% }  div-flow>[size~="x-s-30"]  { width: 30% }  div-flow>[size~="x-s-40"]  { width: 40% }  div-flow>[size~="x-s-50"]  { width: 50% }  div-flow>[size~="x-s-60"]  { width: 60% }  div-flow>[size~="x-s-70"]  { width: 70% }  div-flow>[size~="x-s-80"]  { width: 80% }  div-flow>[size~="x-s-90"]  { width: 90% }  div-flow>[size~="x-s-100"] { width: 100% }

        div-flow>[size~="y-s-0"]  { height: 0; display:none }
        div-flow>[size~="y-s-1"]  { height: 1% }  div-flow>[size~="y-s-11"]  { height: 11% }  div-flow>[size~="y-s-21"]  { height: 21% }  div-flow>[size~="y-s-31"]  { height: 31% }  div-flow>[size~="y-s-41"]  { height: 41% }  div-flow>[size~="y-s-51"]  { height: 51% }  div-flow>[size~="y-s-61"]  { height: 61% }  div-flow>[size~="y-s-71"]  { height: 71% }  div-flow>[size~="y-s-81"]  { height: 81% }  div-flow>[size~="y-s-91"]  { height: 91% }
        div-flow>[size~="y-s-2"]  { height: 2% }  div-flow>[size~="y-s-12"]  { height: 12% }  div-flow>[size~="y-s-22"]  { height: 22% }  div-flow>[size~="y-s-32"]  { height: 32% }  div-flow>[size~="y-s-42"]  { height: 42% }  div-flow>[size~="y-s-52"]  { height: 52% }  div-flow>[size~="y-s-62"]  { height: 62% }  div-flow>[size~="y-s-72"]  { height: 72% }  div-flow>[size~="y-s-82"]  { height: 82% }  div-flow>[size~="y-s-92"]  { height: 92% }
        div-flow>[size~="y-s-3"]  { height: 3% }  div-flow>[size~="y-s-13"]  { height: 13% }  div-flow>[size~="y-s-23"]  { height: 23% }  div-flow>[size~="y-s-33"]  { height: 33% }  div-flow>[size~="y-s-43"]  { height: 43% }  div-flow>[size~="y-s-53"]  { height: 53% }  div-flow>[size~="y-s-63"]  { height: 63% }  div-flow>[size~="y-s-73"]  { height: 73% }  div-flow>[size~="y-s-83"]  { height: 83% }  div-flow>[size~="y-s-93"]  { height: 93% }
        div-flow>[size~="y-s-4"]  { height: 4% }  div-flow>[size~="y-s-14"]  { height: 14% }  div-flow>[size~="y-s-24"]  { height: 24% }  div-flow>[size~="y-s-34"]  { height: 34% }  div-flow>[size~="y-s-44"]  { height: 44% }  div-flow>[size~="y-s-54"]  { height: 54% }  div-flow>[size~="y-s-64"]  { height: 64% }  div-flow>[size~="y-s-74"]  { height: 74% }  div-flow>[size~="y-s-84"]  { height: 84% }  div-flow>[size~="y-s-94"]  { height: 94% }
        div-flow>[size~="y-s-5"]  { height: 5% }  div-flow>[size~="y-s-15"]  { height: 15% }  div-flow>[size~="y-s-25"]  { height: 25% }  div-flow>[size~="y-s-35"]  { height: 35% }  div-flow>[size~="y-s-45"]  { height: 45% }  div-flow>[size~="y-s-55"]  { height: 55% }  div-flow>[size~="y-s-65"]  { height: 65% }  div-flow>[size~="y-s-75"]  { height: 75% }  div-flow>[size~="y-s-85"]  { height: 85% }  div-flow>[size~="y-s-95"]  { height: 95% }
        div-flow>[size~="y-s-6"]  { height: 6% }  div-flow>[size~="y-s-16"]  { height: 16% }  div-flow>[size~="y-s-26"]  { height: 26% }  div-flow>[size~="y-s-36"]  { height: 36% }  div-flow>[size~="y-s-46"]  { height: 46% }  div-flow>[size~="y-s-56"]  { height: 56% }  div-flow>[size~="y-s-66"]  { height: 66% }  div-flow>[size~="y-s-76"]  { height: 76% }  div-flow>[size~="y-s-86"]  { height: 86% }  div-flow>[size~="y-s-96"]  { height: 96% }
        div-flow>[size~="y-s-7"]  { height: 7% }  div-flow>[size~="y-s-17"]  { height: 17% }  div-flow>[size~="y-s-27"]  { height: 27% }  div-flow>[size~="y-s-37"]  { height: 37% }  div-flow>[size~="y-s-47"]  { height: 47% }  div-flow>[size~="y-s-57"]  { height: 57% }  div-flow>[size~="y-s-67"]  { height: 67% }  div-flow>[size~="y-s-77"]  { height: 77% }  div-flow>[size~="y-s-87"]  { height: 87% }  div-flow>[size~="y-s-97"]  { height: 97% }
        div-flow>[size~="y-s-8"]  { height: 8% }  div-flow>[size~="y-s-18"]  { height: 18% }  div-flow>[size~="y-s-28"]  { height: 28% }  div-flow>[size~="y-s-38"]  { height: 38% }  div-flow>[size~="y-s-48"]  { height: 48% }  div-flow>[size~="y-s-58"]  { height: 58% }  div-flow>[size~="y-s-68"]  { height: 68% }  div-flow>[size~="y-s-78"]  { height: 78% }  div-flow>[size~="y-s-88"]  { height: 88% }  div-flow>[size~="y-s-98"]  { height: 98% }
        div-flow>[size~="y-s-9"]  { height: 9% }  div-flow>[size~="y-s-19"]  { height: 19% }  div-flow>[size~="y-s-29"]  { height: 29% }  div-flow>[size~="y-s-39"]  { height: 39% }  div-flow>[size~="y-s-49"]  { height: 49% }  div-flow>[size~="y-s-59"]  { height: 59% }  div-flow>[size~="y-s-69"]  { height: 69% }  div-flow>[size~="y-s-79"]  { height: 79% }  div-flow>[size~="y-s-89"]  { height: 89% }  div-flow>[size~="y-s-99"]  { height: 99% }
        div-flow>[size~="y-s-10"] { height: 10% } div-flow>[size~="y-s-20"]  { height: 20% }  div-flow>[size~="y-s-30"]  { height: 30% }  div-flow>[size~="y-s-40"]  { height: 40% }  div-flow>[size~="y-s-50"]  { height: 50% }  div-flow>[size~="y-s-60"]  { height: 60% }  div-flow>[size~="y-s-70"]  { height: 70% }  div-flow>[size~="y-s-80"]  { height: 80% }  div-flow>[size~="y-s-90"]  { height: 90% }  div-flow>[size~="y-s-100"] { height: 100% }

    }


    /* --- flow debug*/

    div-flow:not([type~="loose"]):not([type~="unwrap"]) > *,
    div-flow[type~="loose"][type~="unwrap"] >*,
    div-flow[axis~="auto"],div-flow:not([axis]) > *,

    div-flow[type~="loose"][type~="unwrap"],
    div-flow:not([type~="loose"]):not([type~="unwrap"])::before,
    div-flow[axis~="auto"],div-flow:not([axis])::before{
        content: "UNDEFINED DIRECTION MARKER (tip : left,up,right,down)";
        color:white;
        background: red;
    }

    div-flow[axis~="x"][axis~="y"]::before{
        content: 'CROSS SETTINGS ERROR (axis="x y")';
        color:white;
        background: red;
    }

    div-flow[type~="loose"][type~="unwrap"]::before{
        content: 'CROSS SETTINGS ERROR (type="loose|unwrap")';
        color:white;
        background: red;
    }

    div-flow:not([type~="loose"]):not([type~="unwrap"])::before{
        content: 'SET A TYPE (type="loose|unwrap")';
        color:white;
        background: red;
    }

    div-flow[axis~="auto"],div-flow:not([axis])::before{
        content: 'SET A DIRECTION (axis="x|y")';
        color:white;
        background: red;
    }


    /* ———— responsive layout axes */

    @media only screen and (min-width: 1920px) {

        div-flow[axis~="l-x"] {
            display: flex;
            justify-content: space-between;
            align-content: center;
        }

        div-flow[axis~="l-x"][type~="loose"] {
            flex-flow: row wrap;
        }

        div-flow[axis~="l-x"][type~="unwrap"] {
            flex-flow: nowrap;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            overflow: auto clip;
            height: fit-content;
        }

        div-flow[axis~="l-x"]>.--growed-content,
        div-flow[axis~="l-x"].--growed-contents>* {
            flex-grow:1
        }

        div-flow[axis~="l-x"]>.--stretch-content,
        div-flow[axis~="l-x"].--stretch-contents>* {
            height: 100%;
            display: flex;
        }

        div-flow[axis~="l-x"]>.--fit-content,
        div-flow[axis~="l-x"].--fit-contents>* {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-inline-size: fit-content;
        }
        div-flow[axis~="l-x"].--top-center {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="l-x"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="l-x"].--top-right {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="l-x"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="l-x"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="l-x"].--middle-left {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="l-x"].--middle-right {
            align-items: center;
            justify-content: end;
        }
        div-flow[axis~="l-x"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="l-x"].--bottom-center {
            align-items: end;
            justify-content: center;
        }

        div-flow[axis~="l-x"].--bottom-left {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="l-x"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="l-x"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

        div-flow[axis~="l-y"] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        div-flow[axis~="l-y"][type~="loose"] {
            flex-wrap: wrap;
        }

        div-flow[axis~="l-y"][type~="unwrap"] {
            flex-wrap: nowrap;
            overflow: clip auto;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        div-flow[axis~="l-y"]>.--stretch-content,
        div-flow[axis~="l-y"].--stretch-contents>* {
            width: 100%;
            display: flex;
        }

        div-flow[axis~="l-y"]>.--fit-content,
        div-flow[axis~="l-y"].--fit-contents>* {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div-flow[axis~="l-y"].--top-center {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="l-y"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="l-y"].--top-right {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="l-y"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="l-y"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="l-y"].--middle-left {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="l-y"].--middle-right {
            align-items: end;
            justify-content: center;
        }
        div-flow[axis~="l-y"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="l-y"].--bottom-center {
            align-items: center;
            justify-content: end;
        }

        div-flow[axis~="l-y"].--bottom-left {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="l-y"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="l-y"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

    }

    @media only screen and (min-width: 755px) and (max-width: 1920px) {

        div-flow[axis~="m-x"] {
            display: flex;
            justify-content: space-between;
            align-content: center;
        }

        div-flow[axis~="m-x"][type~="loose"] {
            flex-flow: row wrap;
        }

        div-flow[axis~="m-x"][type~="unwrap"] {
            flex-flow: nowrap;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            overflow: auto clip;
            height: fit-content;
        }

        div-flow[axis~="m-x"]>.--growed-content,
        div-flow[axis~="m-x"].--growed-contents>* {
            flex-grow:1
        }

        div-flow[axis~="m-x"]>.--stretch-content,
        div-flow[axis~="m-x"].--stretch-contents>* {
            height: 100%;
            display: flex;
        }

        div-flow[axis~="m-x"]>.--fit-content,
        div-flow[axis~="m-x"].--fit-contents>* {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-inline-size: fit-content;
        }
        div-flow[axis~="m-x"].--top-center {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="m-x"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="m-x"].--top-right {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="m-x"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="m-x"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="m-x"].--middle-left {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="m-x"].--middle-right {
            align-items: center;
            justify-content: end;
        }
        div-flow[axis~="m-x"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="m-x"].--bottom-center {
            align-items: end;
            justify-content: center;
        }

        div-flow[axis~="m-x"].--bottom-left {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="m-x"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="m-x"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

        div-flow[axis~="m-y"] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        div-flow[axis~="m-y"][type~="loose"] {
            flex-wrap: wrap;
        }

        div-flow[axis~="m-y"][type~="unwrap"] {
            flex-wrap: nowrap;
            overflow: clip auto;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        div-flow[axis~="m-y"]>.--stretch-content,
        div-flow[axis~="m-y"].--stretch-contents>* {
            width: 100%;
            display: flex;
        }

        div-flow[axis~="m-y"]>.--fit-content,
        div-flow[axis~="m-y"].--fit-contents>* {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div-flow[axis~="m-y"].--top-center {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="m-y"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="m-y"].--top-right {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="m-y"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="m-y"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="m-y"].--middle-left {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="m-y"].--middle-right {
            align-items: end;
            justify-content: center;
        }
        div-flow[axis~="m-y"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="m-y"].--bottom-center {
            align-items: center;
            justify-content: end;
        }

        div-flow[axis~="m-y"].--bottom-left {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="m-y"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="m-y"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

    }

    @media only screen and (max-width: 755px) {

        div-flow[axis~="s-x"] {
            display: flex;
            justify-content: space-between;
            align-content: center;
        }

        div-flow[axis~="s-x"][type~="loose"] {
            flex-flow: row wrap;
        }

        div-flow[axis~="s-x"][type~="unwrap"] {
            flex-flow: nowrap;
            scroll-behavior: smooth;
            scroll-snap-type: x mandatory;
            overflow: auto clip;
            height: fit-content;
        }

        div-flow[axis~="s-x"]>.--growed-content,
        div-flow[axis~="s-x"].--growed-contents>* {
            flex-grow:1
        }

        div-flow[axis~="s-x"]>.--stretch-content,
        div-flow[axis~="s-x"].--stretch-contents>* {
            height: 100%;
            display: flex;
        }

        div-flow[axis~="s-x"]>.--fit-content,
        div-flow[axis~="s-x"].--fit-contents>* {
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-inline-size: fit-content;
        }
        div-flow[axis~="s-x"].--top-center {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="s-x"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="s-x"].--top-right {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="s-x"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="s-x"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="s-x"].--middle-left {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="s-x"].--middle-right {
            align-items: center;
            justify-content: end;
        }
        div-flow[axis~="s-x"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="s-x"].--bottom-center {
            align-items: end;
            justify-content: center;
        }

        div-flow[axis~="s-x"].--bottom-left {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="s-x"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="s-x"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

        div-flow[axis~="s-y"] {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }

        div-flow[axis~="s-y"][type~="loose"] {
            flex-wrap: wrap;
        }

        div-flow[axis~="s-y"][type~="unwrap"] {
            flex-wrap: nowrap;
            overflow: clip auto;
            scroll-behavior: smooth;
            scroll-snap-type: y mandatory;
        }

        div-flow[axis~="s-y"]>.--stretch-content,
        div-flow[axis~="s-y"].--stretch-contents>* {
            width: 100%;
            display: flex;
        }

        div-flow[axis~="s-y"]>.--fit-content,
        div-flow[axis~="s-y"].--fit-contents>* {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        div-flow[axis~="s-y"].--top-center {
            align-items: center;
            justify-content: start;
        }

        div-flow[axis~="s-y"].--top-left {
            align-items: start;
            justify-content: start;
        }

        div-flow[axis~="s-y"].--top-right {
            align-items: end;
            justify-content: start;
        }

        div-flow[axis~="s-y"].--top-distributed {
            align-items: start;
            justify-content: space-between;
        }
        div-flow[axis~="s-y"].--middle-center {
            align-items: center;
            justify-content: center;
        }

        div-flow[axis~="s-y"].--middle-left {
            align-items: start;
            justify-content: center;
        }

        div-flow[axis~="s-y"].--middle-right {
            align-items: end;
            justify-content: center;
        }
        div-flow[axis~="s-y"].--middle-distributed {
            align-items: center;
            justify-content: space-between;
        }
        div-flow[axis~="s-y"].--bottom-center {
            align-items: center;
            justify-content: end;
        }

        div-flow[axis~="s-y"].--bottom-left {
            align-items: start;
            justify-content: end;
        }

        div-flow[axis~="s-y"].--bottom-right {
            align-items: end;
            justify-content: end;
        }

        div-flow[axis~="s-y"].--bottom-distributed {
            align-items: end;
            justify-content: space-between;
        }

    }

}