.grid-base {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
}

.grid-base-md {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(auto-fit, minmax(clamp(min(100%, 10rem), 25%, calc(25% - (var(--grid-gutter)*1.75))), 1fr));
}

.grid-base.grid-footer[data-layout='halves'] {
     --grid-min-item-size: clamp(min(100%, 10rem), 50%, calc(50% - (var(--grid-gutter)*1.5)));
}

.grid-footer > *:last-child,
.grid-footer > *:last-child > a {
    text-align: right;
    display: block;
}

@media (max-width: 23.65rem) {
    .grid-footer > *:last-child,
    .grid-footer > *:last-child > a {
        text-align: left;
    }
}

/* A split 50/50 layout */
.grid-base[data-layout='halves'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 20rem), 50%, calc(50% - (var(--grid-gutter)*1.5)));
}

/* Three column grid layout */
.grid-base[data-layout='thirds'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 20rem), 33%, calc(33.33% - (var(--grid-gutter)*1.67)));
}

/* Four column grid layout */
.grid-base[data-layout='fourths'] {
    --grid-placement: auto-fit;
    --grid-min-item-size: clamp(min(100%, 18rem), 25%, calc(25% - (var(--grid-gutter)*1.75)));
}

/* ROW */
.tt-row {
    display: flex;
    flex-wrap: nowrap; /* don't wrap unless you want it */
    gap: 0 var(--form-row-margin-bottom, 1rem);
    width: 100%;
}

/* BASE COLUMN */
.tt-col {
    display: flex;
    flex-direction: column; /* good for form items */
    min-width: 0; /* prevents overflow */
}

/* TAKES ONLY WHAT IT NEEDS */
.tt-col-auto {
    flex: 0 0 auto;
}

/* TAKES THE REMAINING SPACE */
.tt-col-fill {
    flex: 1 1 auto;
    min-width: 0;
}