<div class="form-group mb-4">
    <label class="label text-dark fs-18">Project Preview Image</label>
    <div class="form-control h-100 text-center position-relative p-4 p-lg-5">
        <div class="product-upload">
            <label for="file-upload" class="file-upload mb-0">
                <i class="ri-folder-image-line bg-primary bg-opacity-10 p-2 rounded-1 text-primary"></i>
                <span class="d-block text-body fs-14">Drag and drop an image or <span class="text-primary text-decoration-underline">Browse</span></span>
            </label>
            <input id="file-upload" type="file">
        </div>
    </div>
</div>

<div class="form-group">
    <label class="label">File Upload - Product Gallery</label>
    <div class="form-control h-100 text-center position-relative p-4 p-lg-5">
        <div class="product-upload">
            <label for="file-upload" class="file-upload mb-0">
                <i class="ri-upload-cloud-2-line fs-2 text-gray-light"></i>
                <span class="d-block fw-semibold text-body">Drop files here or click to upload.</span>
            </label>
            <input id="file-upload" type="file">
        </div>
    </div>
</div>

<div class="form-group p-4 d-sm-flex justify-content-between align-items-center rounded-3">
    <div class="d-sm-flex align-items-center mb-3 mb-sm-0 me-lg-3">
        <div class="me-md-5 pe-xxl-5 mb-3 mb-sm-0">
            <h4 class="body-font fs-15 fw-semibold text-body">Project Avatar</h4>
            <p>This will displayed on your project avatar.</p>
        </div>
        <img src="assets/images/product-11.jpg" class="rounded-4 wh-78 ms-3 ms-lg-0" alt="product">
    </div>

    <div class="d-flex ms-sm-3 ms-md-0">
        <button class="btn bg-danger bg-opacity-10 text-danger fw-semibold">Delete</button>
        <button class="btn bg-primary bg-opacity-10 text-primary fw-semibold ms-3">Update</button>
    </div>
</div>