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

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