.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)));
}