我无法计算出我应该添加/删除哪些类来实现与Bootstrap Border hero with cropped image and shadows.的预览中相同的图像定位
我的形象并不是坐在英雄的边缘，在移动设备上看起来更糟糕.以下是我心目中的英雄现在的样子:
<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>