<div class="py-11 pt-lg-12 pb-lg-10">
<div class="container">
<div class="row">
<div class="col-12 col-lg-2/5 mb-6 mb-lg-0">
<div class="card border-0 banner banner-02">
<div class="card-img bg-img-cover-center"
style="background-image: url('../../../images/banner-48.jpg');"></div>
<div class="card-img-overlay d-inline-flex flex-column p-6 pl-md-9 pt-md-10">
<h3 class="card-title fs-42 lh-123 mb-4" style="max-width:300px">25% off Everything</h3>
<p class="card-text fs-18 font-weight-500 mb-5" style="max-width: 270px;">
Makeup with extended range in colors for every human.
</p>
<div>
<a href="#"
class="fs-16 font-weight-600 btn text-white bg-secondary bg-hover-violet shadow-1">Shop
Sale</a>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-3/5">
<div class="card border-0 banner banner-02 hover-zoom-in hover-shine">
<div class="card-img bg-img-cover-center"
style="background-image: url('../../../images/banner-46.jpg');">
</div>
</div>
</div>
</div>
<div class="row mt-6">
<div class="col-12 col-lg-3/5 order-lg-1 order-2">
<div class="card border-0 banner banner-02 hover-zoom-in hover-shine">
<div class="card-img bg-img-cover-center"
style="background-image: url('../../../images/banner-47.jpg');">
</div>
</div>
</div>
<div class="col-12 col-lg-2/5 mb-6 mb-lg-0 order-lg-2 order-1">
<div class="card border-0 banner banner-02">
<div class="card-img bg-img-cover-center"
style="background-image: url('../../../images/banner-49.jpg');"></div>
<div class="card-img-overlay d-inline-flex flex-column p-6 pl-md-9 pt-md-10">
<h3 class="card-title fs-42 lh-123 mb-4" style="max-width:320px">Get The Skin You Want To Feel</h3>
<p class="card-text fs-18 font-weight-500 mb-5" style="max-width: 270px;">
Makeup with extended range in colors for every human.
</p>
<div>
<a href="#"
class="fs-16 font-weight-600 btn text-white bg-secondary bg-hover-violet shadow-1">Shop Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>