div.input-file {
    cursor: pointer;
    box-sizing: border-box;
    border: var(--border-thickness) solid var(--background-primary);
    background-color: var(--background-tertiary);
    aspect-ratio: 21 / 9;
    width: 100%;
    height: 100%;
}

div.input-file input[type='file'] {
    display: none;
}

div.input-file div.prompt {
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 8px;
    width: 100%;
    height: 100%;
}

div.input-file div.prompt img.icon {
    margin: 16px;
    width: 32px;
    height: 32px;
}

div.input-file div.prompt span.hint {
    font-size: large;
}

div.input-file div.prompt span.header {
    text-align: center;
}

div.input-file div.prompt span.subheader {
    color: var(--font-color-secondary);
    font-size: small;
    text-align: center;
}

div.input-file div.preview {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

div.input-file div.preview img,
div.input-file div.preview video {
    max-width: 100%;
    height: 100%;
    object-fit: contain;
}