.fields {
    --gap: 1.5em;
    --width50: calc(100% / 2 - var(--gap) * 1 / 2);
    --width33: calc(100% / 3 - var(--gap) * 2 / 3);
    --width25: calc(100% / 4 - var(--gap) * 3 / 4);
    --width66: calc(100% / 3 * 2 - var(--gap) * 1 / 2);
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    position: relative;
    overflow: visible;
    gap: 0 var(--gap);
}

.fields.nowrap > .field {
    flex-wrap: nowrap;
}

.fields.align-left {
    justify-content: flex-start;
}

.field {
    margin: 0 0 24px 0;
    text-align: left;
    box-sizing: border-box;
    max-width: 100%;
    position: relative;
    overflow: visible; /*Не надо hidden, не будут выдны выпадающие списки с position=absolute*/
}

.field .field {
    margin-bottom: 0;
}

.fields > .field {
    flex-shrink: 0;
    flex-grow: 0;
    display: block;
    flex-basis: 100%;
}


.field.full {
    flex-basis: 100%;
}

.field.half {
    flex-basis: var(--width50);
}

.field.third {
    flex-basis: var(--width33);
}

.field.halfhalf {
    flex-basis: var(--width25);
}

.field.twothirds {
    flex-basis: var(--width66);
}

.fields.tiny {
    --gap: 0.5em;
}

.fields.close {
    --gap: 2px;
}

@media screen and (max-width: 736px) {
    .fields:not(.tiny):not(.close):not(.nowrap) > .field.half,
    .fields:not(.tiny):not(.close):not(.nowrap) > .field.twothirds {
        flex-basis: 100%;
        max-width: unset;
    }

    .fields:not(.tiny):not(.close):not(.nowrap) > .field.third,
    .fields:not(.tiny):not(.close):not(.nowrap) > .field.halfhalf {
        flex-basis: var(--width50);
    }
}