:root {
    --control-width: 22rem;
}

.upscale-page {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(16rem, var(--control-width)) 1fr;
    margin: 2rem auto;
    width: var(--width);
}

.controls,
.images,
label {
    display: grid;
    gap: var(--gap);
}

.controls {
    align-content: start;
}

label {
    color: var(--muted);
    gap: .4rem;
}

select,
input,
#upscale {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text);
    font: inherit;
    min-width: 0;
    padding: .65rem .8rem;
    width: 100%;
}

#upload {
    padding: 0;
}

#upload::file-selector-button {
    background: var(--panel);
    border: 0;
    border-right: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    margin-right: var(--gap);
    padding: .65rem .8rem;
}

.images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.images img {
    background: var(--panel);
    max-height: 80vh;
    object-fit: contain;
    width: 100%;
}

@media (max-width: 800px) {
    .upscale-page,
    .images {
        grid-template-columns: 1fr;
    }
}