Bulma Blog Components

<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>