.grid-with-columns {
    display: grid;
    --grid-with-columns-min: 150px; /* Default */
    --grid-gap: 0;
    gap: var(--grid-gap) !important; /* Need !important to overrule Bootstrap's gap css */
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-with-columns-min), 100%), 1fr));
    /* Pass Bootstrap's gap-... classes to css variables */
    &.gap-1 { --grid-gap: .25rem; }
    &.gap-2 { --grid-gap: .5rem; }
    &.gap-3 { --grid-gap: 1rem; }
    &.gap-4 { --grid-gap: 1.5rem; }
    &.gap-5 { --grid-gap: 3rem; }
    /* Backfills the gap a spanning cell leaves at the end of a row with a later, narrower cell */
    &.grid-dense {
        grid-auto-flow: dense;
    }
    &.grid-align-start > * {
        align-self: start;
    }
}

/**
 * A fixed number of equally wide columns instead of a minimum track width. For items that have to
 * keep sharing a row however narrow that row is: auto-fit folds them back onto a single column as
 * soon as the track no longer fits, which on a phone is always.
 */
.grid-with-columns.grid-columns-fixed {
    --grid-with-columns-count: 2;
    /* A zero minimum is what keeps content wider than its column, like a long label, inside it */
    grid-template-columns: repeat(var(--grid-with-columns-count), minmax(0, 1fr));
}

.file-grid-wrapper {
    position: relative;
}

.file-grid-size-input {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 1;
    opacity: .25;
    &:not(:hover) input {
        font-size: .8rem;
        appearance: none;
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        &[type=number] {
            -moz-appearance: textfield;
        }
        /** space for 3 characters + padding left/right */
        width: calc(3ch + 15px);
        text-align: center;
        border-radius: 50%;
    }
    &:hover {
        opacity: 1;
        /** space for 3 characters + the up/down arrows + padding left/right */
        width: calc(3ch + 35px);
    }
    input {
        padding: 3px 5px;
    }
}