<section class="section has-background-light is-clipped">
<div class="container">
<h2 class="title mb-16 mb-24-tablet">Latest Blog</h2>
<div class="columns">
<div class="column is-5 mb-20 is-flex-shrink-0">
<div class="is-relative">
<a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
<a class="is-block is-relative" href="#">
<div class="is-relative" style="height: 384px;">
<img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-surfboard-stands.png" alt="">
</div>
<div class="mt-12 is-relative">
<div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
<div class="px-12">
<h3 class="title mb-8 is-size-3 has-text-dark">After curabitur eu laoreet libero eget en vel odio ultricies!</h3>
<span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">15 MAY 2021</span>
</div>
</div>
</a>
</div>
</div>
<div class="column is-5 mb-20 is-flex-shrink-0">
<div class="is-relative">
<a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
<a class="is-block is-relative" href="#">
<div class="is-relative" style="height: 384px;">
<img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
</div>
<div class="mt-12 is-relative">
<div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
<div class="px-12">
<h3 class="title is-size-3 has-text-dark mb-8">Next year: one ultricies condimentum phare</h3>
<span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
</div>
</div>
</a>
</div>
</div>
<div class="column is-5 is-hidden-touch is-flex-shrink-0" style="opacity: 40%;">
<div class="is-relative">
<a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
<a class="is-block is-relative" href="#">
<div class="is-relative" style="height: 384px;">
<img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
</div>
<div class="mt-12 is-relative">
<div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
<div class="px-12">
<h3 class="title mb-8 is-size-3 has-text-dark">Next year: one ultricies condimentum phare</h3>
<span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
</div>
</div>
</a>
</div>
</div>
<div class="column is-5 is-flex-shrink-0">
<div class="is-relative">
<a class="button is-light is-small mt-80 mr-6 is-absolute is-top-0 is-right-0" href="#" style="z-index: 10;">Summer</a>
<a class="is-block is-relative" href="#">
<div class="is-relative" style="height: 384px;">
<img class="image is-fullwidth is-cover" style="height: 100%" src="yofte-assets/images/placeholder-girl.png" alt="">
</div>
<div class="mt-12 is-relative">
<div class="pl-1 is-absolute is-top-0 has-background-info" style="height:176px;"></div>
<div class="px-12">
<h3 class="title mb-8 is-size-3 has-text-dark">Next year: one ultricies condimentum phare</h3>
<span class="has-text-info is-size-6 is-uppercase has-text-weight-bold">14 MAY 2021</span>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="mb-24 columns is-multiline is-justify-content-space-between is-align-items-center">
<div class="column is-9 mx-auto-mobile mr-4 is-relative has-background-grey-light p-0" style="height: 2px;">
<div class="column is-3 is-absolute is-top-0 is-bottom-0 is-left-0 has-background-primary p-0"></div>
</div>
<div class="column is-2 ml-auto is-flex is-justify-content-end is-align-items-center">
<a class="button is-primary p-0 mr-5 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px; height: 48px;" href="#">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
</svg>
</a>
<a class="button is-info p-0 is-flex is-justify-content-center is-align-items-center is-flex-shrink-0" style="width: 48px; height: 48px;" href="#">
<svg width="8" height="12" viewbox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
</svg>
</a>
</div>
</div>
<div><a class="button is-primary" href="#">Show More</a></div>
</div>
</section>