Bootstrap 5 Hero - html

Question

I am unable to figure out what classes should I add/remove to achieve the same image positioning as in the preview of the Bootstrap Border hero with cropped image and shadows.
My image doesn't sit on the edge of the hero and it looks even worst on mobile scale. Here is what my hero looks like now:
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
<p class="lead">Text</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
<button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
</div>
</div>
</div>

Answer 1

Solutions for both
The image in example is an horizontal image hence it fits perfectly on the right end of div. Your image is vertical so apply this class : float-end on image tag.
For mobile view. Your code works fine only image alignment is distorted. for which apply w-100 and m-auto to image tag. your updated image tag will look like :
<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="" width="75%">
here is the working snippet
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet"/>
<div id="support" class="hero-donate container my-5">
<div class="row p-4 pb-0 pe-lg-0 pt-lg-5 align-items-center rounded-3 border shadow-lg">
<div class="col-lg-7 p-3 p-lg-5 pt-lg-3">
<h1 class="display-4 fw-bold lh-1">Find out more and support our work</h1>
<p class="lead">Text</p>
<div class="d-grid gap-2 d-md-flex justify-content-md-start mb-4 mb-lg-3">
<button type="button" class="btn btn-outline-danger btn-lg px-4 me-md-2 fw-bold">DONATE</button>
<button type="button" class="btn btn-secondary btn-lg px-4">Volunteer</button>
</div>
</div>
<div class="col-lg-4 offset-lg-1 p-0 overflow-hidden">
<img class="rounded-lg-3 shadow-lg float-end m-auto w-100" src="https://images.unsplash.com/photo-1608535002897-27b2aa592456?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8" alt="" width="75%">
</div>
</div>
</div>