<section class="position-relative bg-secondary-dark py-24 py-md-40 overflow-hidden">
<div class="container">
<div class="mw-6xl mx-auto mb-32">
<div class="mw-xl">
<span class="h6 text-primary">Our Works</span>
<h2 class="h3 text-white mt-10">More than 20 years in the game</h2>
</div>
</div>
</div>
<div class="d-flex px-4 px-md-0 justify-content-center position-relative">
<img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
<div class="flex-shrink-0 w-100 mw-2xl mw-lg-3xl mw-xl-5xl mw-xxl-6xl mx-8 mx-lg-16 mx-xxl-28 position-relative">
<img class="d-block w-100 img-fluid mb-12" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1617791160505-6f00504e3519?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80" alt="">
<div class="row">
<div class="col-12 col-md-9 col-xl-10 mb-6 mb-md-0">
<div class="position-relative pt-12 pb-16 px-6 px-sm-20 rounded bg-secondary">
<div class="position-absolute top-0 start-0 ms-20 translate-middle bg-secondary" style="width: 64px; height: 64px; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);"></div>
<h4 class="text-white mb-6">Experience design for your products</h4>
<p class="text-secondary-light mb-0">The brown fox jumps over the lazy dog.</p>
</div>
</div>
<div class="col-12 col-md-3 col-xl-2 text-end">
<button class="btn p-0 me-2 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
<svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.84708 12.1077C7.05097 12.3133 7.05097 12.6436 6.84708 12.8476C6.64319 13.0517 6.31377 13.0525 6.10988 12.8476L0.152917 6.8708C-0.0509739 6.66673 -0.0509738 6.33645 0.152917 6.13087L6.10988 0.154027C6.31377 -0.0500387 6.64319 -0.0500386 6.84708 0.154027C7.05098 0.358848 7.05098 0.689887 6.84708 0.893952L1.4143 6.50121L6.84708 12.1077Z" fill="white"></path>
</svg>
</button>
<button class="btn p-0 bg-primary d-inline-flex justify-content-center align-items-center text-white rounded-circle" style="width: 62px; height: 62px;">
<svg width="7" height="13" viewbox="0 0 7 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.152917 0.894235C-0.0509742 0.688658 -0.0509742 0.358375 0.152917 0.15431C0.356808 -0.0497557 0.686228 -0.0505119 0.89012 0.15431L6.84708 6.13116C7.05097 6.33522 7.05097 6.6655 6.84708 6.87108L0.890119 12.8479C0.686227 13.052 0.356807 13.052 0.152916 12.8479C-0.0509753 12.6431 -0.0509753 12.3121 0.152916 12.108L5.5857 6.50074L0.152917 0.894235Z" fill="white"></path>
</svg>
</button>
</div>
</div>
</div>
<img class="d-none d-md-block img-fluid" style="height: 495px; object-fit: cover;" src="https://images.unsplash.com/photo-1618005198919-d3d4b5a92ead?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=967&q=80" alt="">
</div>
</section>