<section class="section has-background-light is-clipped">
<div class="container">
<h2 class="title mb-16 mb-24-tablet">Discover our products</h2>
<div class="mb-20 columns is-multiline">
<div class="column is-3-desktop is-6-tablet">
<div class="has-background-white pt-4 px-10 pb-10 is-relative">
<span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-info has-text-weight-bold">NEW</span>
<a class="mt-6 mb-2 px-6 is-block" href="#">
<img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/waterbottle.png" alt="">
<h5 class="title is-size-5 mb-2">BRILE water filter</h5>
<p class="has-text-info is-size-5 has-text-weight-bold">$29.89</p>
</a>
<a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
</a>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="has-background-white pt-4 px-10 pb-10 is-relative">
<span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-danger has-text-weight-bold">-15%</span>
<a class="mt-6 mb-2 px-6 is-block" href="#">
<img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/cycle.png" alt="">
<h5 class="title is-size-5 mb-2">Bicycle S20</h5>
<p>
<span class="has-text-info is-size-5 has-text-weight-bold">$14.30</span>
<span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$15.90</span>
</p>
</a>
<a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
</a>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="has-background-white pt-4 px-10 pb-10 is-relative">
<span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-danger has-text-weight-bold">-15%</span>
<a class="mt-6 mb-2 px-6 is-block" href="#">
<img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/basketball.png" alt="">
<h5 class="title is-size-5 mb-2">Nike basketball</h5>
<p>
<span class="has-text-info is-size-5 has-text-weight-bold">$34.89</span>
<span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$33.69</span>
</p>
</a>
<a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
</a>
</div>
</div>
<div class="column is-3-desktop is-6-tablet">
<div class="has-background-white pt-4 px-10 pb-10 is-relative">
<span class="is-absolute is-top-0 is-left-0 ml-4 mt-4 tag is-info has-text-weight-bold">NEW</span>
<a class="mt-6 mb-2 px-6 is-block" href="#">
<img class="mx-auto mb-5 image" style="height: 224px; object-fit: contain;" src="yofte-assets/images/skateboard.png" alt="">
<h5 class="title is-size-5 mb-2">Kiteboard WH</h5>
<p>
<span class="has-text-info is-size-5 has-text-weight-bold">$199.90</span>
<span class="has-text-grey-dark is-size-7 has-text-weight-normal" style="text-decoration: line-through;">$33.69</span>
</p>
</a>
<a class="button is-outlined p-0 ml-auto is-flex" href="#" style="width: 48px; height: 48px;">
<svg width="12" height="12" viewbox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="5" width="2" height="12" fill="currentColor"></rect><rect x="12" y="5" width="2" height="12" transform="rotate(90 12 5)" fill="currentColor"></rect></svg>
</a>
</div>
</div>
</div>
<div class="has-text-centered"><a class="button is-primary" href="#">Show More</a></div>
</div>
</section>