.newRestaurant-content { display: grid; grid-template-columns: auto auto; } .newRestaurant-content-fullwidth { padding: 0px 16px 0px 16px; grid-column-start: 1; grid-column-end: 3; } .image-upload-container { padding: 24px; display: flex; align-items: center; justify-content: center; } .image-preview { width: 200px; height: 200px; border-radius: 15px; box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151)); border: solid 1px rgb(126, 126, 126); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; background-size: cover; background-position: center; } .input-image { width: 0.1ox; height: 0.1px; opacity: 0; cursor: pointer; overflow: hidden; position: absolute; } .input-image + label { margin-left: 24px; font-size: 0.9rem; font-weight: 500; padding: 14px; border-radius: 8px; color: #262626; background-color: #d68000; cursor: pointer; } .input-image + label:hover { background-color: #fd9800; } .newRestaurant-bottom { display: inline-block; } // WIDE .image-upload-container-wide { display: flex; width: 100%; flex-direction: column; align-items: flex-end; } .image-preview-wide { width: 100%; height: 300px; border-radius: 6px; box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151)); display: flex; align-items: center; justify-content: center; font-size: 0.8rem; background-size: cover; background-position: center; } .input-image-wide { width: 0.1px; height: 0.1px; opacity: 0; cursor: pointer; overflow: hidden; position: absolute; } .input-image-wide + label { margin: 16px; font-size: 0.9rem; font-weight: 500; padding: 14px; border-radius: 6px; color: #262626; background-color: #d68000; cursor: pointer; } .input-image-wide + label:hover { background-color: #fd9800; }