1 Column 4

<div class="blocks-sc-1col-04 wrapper bg-color-ui-01">
  <div class="spacer"></div>
  <div class="grid-container">
    <div class="grid-x align-center">
      <div class="large-8 medium-10 small-12 cell">
        <div class="timeline-holder">
          <ins-timeline static-timeline total-count="4">
            <!-- item -->
            <ins-timeline-item>
              <div slot="content">
                <div class="tag-date">
                  <ins-tag class="capitalize" font-color="#1e86e3" background-color="#1e86e31a" label="New">
                  </ins-tag>
                  <span class="date">
                    11 February 2020
                  </span>
                </div>
                <div class="spacer"></div>
                <h2>Insites Database Manager v4.0.2</h2>
                <div class="spacer small"></div>
                <ul>
                  <li>
                    <p>General design / UI updates.</p>
                    <div class="spacer x-small"></div>
                  </li>
                  <li>
                    <p>Updated asset manager preview links to use domain URL, instead of server URL.</p>
                  </li>
                </ul>
                <div class="spacer"></div>
                <img src="https://insites.imgix.net/Dark.png" />
              </div>
            </ins-timeline-item>
            <!-- /item -->

            <!-- item -->
            <ins-timeline-item>
              <div slot="content">
                <div class="tag-date">
                  <ins-tag class="capitalize" font-color="#1e86e3" background-color="#1e86e31a" label="New">
                  </ins-tag>
                  <span class="date">
                    8 February 2020
                  </span>
                </div>
                <div class="spacer"></div>
                <h2>Insites Template - Website v1.6.0</h2>
                <div class="spacer small"></div>
                <ul>
                  <li>
                    <p>Removed backup values used on CSS variables.</p>
                    <div class="spacer x-small"></div>
                  </li>
                  <li>
                    <p>Updated asset manager preview links to use domain URL, instead of server URL.</p>
                  </li>
                </ul>
                <div class="spacer"></div>
              </div>
            </ins-timeline-item>
            <!-- /item -->
          </ins-timeline>
        </div>
        <div class="spacer xxxx-large"></div>
        <div class="pageinations grid-x align-right align-middle">
          <div class="shrink cell">
            <span class="per__page color-font-head form-label"><strong>Rows per page:</strong></span>
            <ins-select id="page-size-select" placeholder="Select Size" small>
              <ins-select-option label="10" value="12" default></ins-select-option>
              <ins-select-option label="15" value="15"></ins-select-option>
              <ins-select-option label="30" value="30"></ins-select-option>
            </ins-select>
          </div>

          <div class="shrink cell">
            <div class="paginate">
              <span>1</span>
              <span>-</span>
              <span>10</span>
              <span>of</span>
              <span>15</span>
              <div>
                <ins-button id="previousPage" label="" icon="icon-angle-left">
                </ins-button>
              </div>
              <div>
                <ins-button id="nextPage" label="" icon="icon-angle-right">
                </ins-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="spacer"></div>
</div>

/* 1col-04 */
.blocks-sc-1col-04 h2 {
  line-height: 38px;
}

.blocks-sc-1col-04 .ins-timeline-item-wrap .ins-timeline-body .ins-timeline-content.inline-content {
  max-width: 100%;
}

.blocks-sc-1col-04 .timeline-holder .date {
  float: right;
  font-family: var(--font-family-03, 'Cabin', sans-serif);
  color: var(--color-font-body, #595959);
}

.blocks-sc-1col-04 .pageinations .ins-select-value-wrap{
  width: 56px;
  border: none;
}

.blocks-sc-1col-04 .paginate button:not([disabled]):hover {
  background-color: var(--color-ui-01);
}

.blocks-sc-1col-04 .paginate button:not([disabled]):hover {
  background-color: var(--color-ui-01);
}

.blocks-sc-1col-04 .paginate button:not([disabled]):hover .btn__icon.action {
  color: var(--color-hover-main, #0964B8);
}

.blocks-sc-1col-04 .paginate button{
  min-width: initial;
  width: 25px;
  height: auto;
  border-radius: 0px;
  margin-left: 8px;
  vertical-align: text-bottom;
  color: var(--color-font-body);
}

.blocks-sc-1col-04 .paginate > span, 
.blocks-sc-1col-04 .paginate > div{
  display: inline-block;
  font-family: var(--font-family-03);
  font-weight: 400;
  font-size: var(--typography-small);
  line-height: var(--typography-small);
  color: var(--color-font-body);
}
/* end 1col-04 */