.grid-with-columns {
    display: grid;
    --grid-with-columns-min: 150px;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--grid-with-columns-min), 100%), 1fr));
}

/**
 * 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-with-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;
    }
}