.image-input {
    position: relative;
    width: 20rem;
    height: 20rem;
    display: flex;
    align-items: stretch;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
    .image-input__label {
        padding: 1rem;
        margin: 0;
        flex-basis: 100%;
        position: relative;
        border-radius: 0.5rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        background-color: var(--light);
        cursor: pointer;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
        .image-input__label:hover,
        .image-input__input:hover ~ .image-input__label {
            background-color: var(--light);
        }
        .image-input__label:focus,
        .image-input__input:focus ~ .image-input__label {
            box-shadow: var(--shadow--light);
        }
        .image-input__label--has-image {
            box-shadow: var(--shadow--light);
            transition: 0.1s ease !important;
        }
            .image-input__label--has-image:hover {
                box-shadow: var(--shadow);
            }
        
        .image-input__icon {
            font-size: 3rem;
            margin-top: 2rem;
        }

    .image-input__input {
		display: none;
    }