.mediaPicker {
    display: flex;
    flex-wrap: wrap;
}
.mediaPickerInput{
    width: 100%;
}
.imageSelect{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    align-items: center;
    justify-items: center;
    padding: 0 22px;
}
@media(max-width: 575px){
    .imageSelect{
        grid-template-columns: 1fr 1fr;
    }
}
.imageSelect img{
    background-image: repeating-conic-gradient(#ccc 0% 25%, #ddd 0% 50%);
    background-size: 20px 20px;
    outline: 2px solid transparent;
    outline-offset: 2px;
    transition: outline-color 0.15s ease-in-out;
    margin: 4px;
    cursor: pointer;
}
.imageSelect img:hover{
    outline-color: #6d8ebf;
    transition: outline-color 0.15s ease-in-out;
}

.selectedImage {
    padding: 5px;
    border: 1px solid;
    margin: 5px 0;
    width: auto;
    display: flex;
    position: relative;
    min-width: 212px;
    min-height: 97px;
    align-items: center;
    justify-content: center;
}
.selectedImage:empty::before {
	content: 'No image selected';
	display: flex;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	align-items: center;
	justify-content: center;
	color: #a6a6a6;
}
.selectedImage img{
    background-image: repeating-conic-gradient(#ccc 0% 25%, #ddd 0% 50%);
    background-size: 20px 20px;
}