<div class="section" style="padding:64px 0">
  <div class="wojo-grid">
    <div class="row double-gutters">
      <div class="columns screen-40 tablet-40 mobile-100 phone-100">
        <span class="wojo positive label">Pricing plans</span>
        <h2>No additional costs. Pay for what you use.</h2>
        <p class="vertical-margin">Choose the most suitable service for your needs with reasonable price.</p>
        <div class="wojo basic rounded buttons" data-weditable="true">
          <a class="wojo primary button" href="#">Monthly</a>
          <a class="wojo negative button" href="#">Yearly 10% OFF</a>
        </div>
      </div>
      <div class="columns screen-30 tablet-30 mobile-100 phone-100 align-bottom">
        <div class="wojo fitted card" data-weditable="true">
          <div class="wojo primary bg header padding" style="background-image:url([SITEURL]/uploads/builder/waves_1.svg);background-repeat: no-repeat;background-size: 100% 50%;;background-position: bottom;
padding-bottom:4em;">
            <h4 class="wojo white text">Individual Plan</h4>
            <div class="wojo white text margin-bottom">
              <span style="vertical-align: top">$</span>
              <span class="wojo huge semi text">22</span>
              <span>/month</span>
            </div>
          </div>
          <div class="horizontal-padding">
            <div class="wojo small flex list align-middle">
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> Community support </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 400+ pages </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 100+ header variations </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 20+ home page options </div>
              </div>
            </div>
          </div>
          <div class="padding">
            <a href="#" type="button" class="wojo primary small fluid button">Get Started</a>
          </div>
        </div>
      </div>
      <div class="columns screen-30 tablet-30 mobile-100 phone-100 align-bottom">
        <div class="wojo fitted card" data-weditable="true">
          <div class="wojo primary bg header padding" style="background-image:url([SITEURL]/uploads/builder/waves_1.svg);background-repeat: no-repeat;background-size: 100% 50%;;background-position: bottom;
padding-bottom:4em;">
            <h4 class="wojo white text">Enterprise Plan</h4>
            <div class="wojo white text margin-bottom">
              <span style="vertical-align: top">$</span>
              <span class="wojo huge semi text">99</span>
              <span>/month</span>
            </div>
          </div>
          <div class="horizontal-padding">
            <div class="wojo small flex list align-middle">
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 24/7 support </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 400+ pages </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 200+ header variations </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> 40+ home page options </div>
              </div>
              <div class="item">
                <div class="content shrink"><span class="wojo small primary circular initials label"><i class="icon check"></i></span></div>
                <div class="content"> E-commerce </div>
              </div>
            </div>
          </div>
          <div class="padding">
            <a href="#" type="button" class="wojo primary small fluid button">Get Started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>