.flex {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    --gap: 16px;
}
    .flex--column {
        flex-direction: column;
    }
    .flex--2-equal > * {
                flex: 0 0 50%;
            }
    .flex--2--30-70 > *:first-child {
                    flex: 0 1 30%
                }
    .flex--2--30-70 > *:last-child {
                    flex: 0 1 70%;
                }
    .flex--2--70-30 > *:first-child {
                    flex: 0 1 70%
                }
    .flex--2--70-30 > *:last-child {
                    flex: 0 1 30%;
                }
    .flex--3-equal > * {
                flex: 0 1 33%;
            }
    .flex--3--2-1-1 > *:first-child {
                    flex: 0 1 66%;
                }
    .flex--3--2-1-1 > *:nth-child(2) {
                    flex: 0 1 1fr;
                }
    .flex--3--2-1-1 > *:last-child {
                    flex: 0 1 1fr;
                }
    .flex--3--1-2-1 > *:first-child {
                    flex: 0 1 1fr;

                }
    .flex--3--1-2-1 > *:nth-child(2) {
                    flex: 0 1 66%;

                }
    .flex--3--1-2-1 > *:last-child {
                    flex: 0 1 1fr;
                }
    .flex--3--1-1-2 > *:first-child {
                    flex: 0 1 1fr;

                }
    .flex--3--1-1-2 > *:nth-child(2) {
                    flex: 0 1 1fr;

                }
    .flex--3--1-1-2 > *:last-child {
                    flex: 0 1 66%;

                }
    .flex--4-equal > * {
                flex: 0 1 25%;
            }
    .flex--4--1-3 > *:first-child {
                    flex: 1 0 40%;
                }
    .flex--4--1-3 > *:not(:first-child) {
                    flex: 0 1 1fr;
                }
    .flex--4--3-1 > *:last-child {
                    flex: 1 0 40%;
                }
    .flex--4--3-1 > *:not(:last-child) {
                    flex: 0 1 1fr;
                }