<div class="form-group">
    <label class="label">File Upload - Product 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">
                <span class="d-inline-block wh-110 bg-body-bg rounded-10 position-relative ">
                    <i class="ri-camera-line wh-38 bg-gray-div7 d-inline-block text-gray-light rounded-circle position-absolute bottom-0 end-0" style="right: -10px !important; bottom: -10px !important;"></i>
                </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 bg-border-gray-light d-sm-flex justify-content-between align-items-center rounded-10">
    <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>