1 Column 5

Breakpoint is limited based on your device or window size.

<div class="blocks-sc-1col-05 wrapper bg-color-ui-01">
  <div class="spacer x-large"></div>
  <div class="grid-container">
    <div class="grid-x gutter grid-padding-x align-center">
      <div class="large-8 medium-10 small-12 cell">
        <div class="articles-container">
          <!-- article -->
          <div class="article-item">
            <div>
              <a>
                <h3>AI Researcher Explains Deep Learning’s Collision Course with Particle Physics
                </h3>
              </a>
            </div>
            <div class="spacer small"></div>
            <div class="publish-info">For a particle physicist, the world’s biggest questions - how did the universe
              originate and what's beyond it — can only be answered with help from the world’s smallest building blocks.
            </div>
            <div class="spacer"></div>
            <a class="button-default color-main">Read More</a>
          </div>
          <!-- /article -->
          <!-- article -->
          <div class="article-item">
            <div>
              <a>
                <h3>Healthcare Headliners Put AI Under the Microscope</h3>
              </a>
            </div>
            <div class="spacer small"></div>
            <div class="publish-info">Two revolutions are meeting in the field of life sciences — the explosion of
              digital data and the rise of AI computing to help healthcare professionals make sense of it all, said
              Daphne Koller and Kimberly Powell at this week’s GPU Technology Conference,.</div>
            <div class="spacer"></div>
            <a class="button-default color-main">Read More</a>
          </div>
          <!-- /article -->
        </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 x-large"></div>
</div>
.blocks-sc-1col-05 .pageinations .ins-select-value-wrap{
  width: 56px;
  border: none;
}

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

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

.blocks-sc-1col-05 .paginate button:not([disabled]):hover .btn__icon.action {
  color: var(--color-hover-main, #0964B8);
}
/* End: INS Component Overwrite */

.blocks-sc-1col-05 ul.side-links {
  list-style: none;
  margin-left: 0px;
}

.blocks-sc-1col-05 ul.side-links li a{
  font-weight: 400;
  font-style: normal;
  font-size: var(--typography-small, 0.875rem);
  color: var(--color-font-body, #595959);
}

.blocks-sc-1col-05 ul.side-links li a:hover{
  color: var(--color-main, #0964B8);
}

.blocks-sc-1col-05 .articles-container .article-item{
  padding-top: 32px;
  padding-bottom: 42px;
}
.blocks-sc-1col-05 .articles-container .article-item:first-child{
  padding-top: 0px;
}
.blocks-sc-1col-05 .articles-container .article-item:last-child{
  padding-bottom: 0px;
}

.blocks-sc-1col-05 .articles-container .article-item:not(:last-child){
  border-bottom: solid 1px var(--color-ui-04, #E4E6EC);
}

.blocks-sc-1col-05 .articles-container .article-item .tag{
  font-size: var(--typography-x-small, 0.75rem);
  color: var(--color-font-body, #595959);
  text-transform: uppercase;
  font-weight: 700;
}

.blocks-sc-1col-05 .articles-container .article-item a:hover,
.blocks-sc-1col-05 .articles-container .article-item a:hover h3{
  color: var(--color-main, #0964B8);
}

.blocks-sc-1col-05 .articles-container .article-item .publish-info{
  font-size: var(--typography-small, 0.875rem);
  color: var(--color-font-body, #595959);
}

.blocks-sc-1col-05 .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-05 .paginate > span, 
.blocks-sc-1col-05 .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);
}

.blocks-sc-1col-05 h3 {
  line-height: 29px;
}