<div class="blocks-sc-2col-08 wrapper bg-color-ui-01">
<div class="spacer xxxx-large"></div>
<div class="grid-container">
<div class="grid-x gutter grid-padding-x gutter-medium">
<div class="large-3 medium-3 small-12 cell">
<h4>Articles</h4>
<div class="spacer large"></div>
<ul class="side-links">
<li>
<a>All</a>
<div class="spacer small"></div>
</li>
<li>
<a>Technology</a>
<div class="spacer small"></div>
</li>
<li>
<a>Entertainment</a>
<div class="spacer small"></div>
</li>
<li>
<a>Business</a>
<div class="spacer small"></div>
</li>
</ul>
</div>
<div class="spacer xxx-large small-12 cell show-for-small-only"></div>
<div class="large-9 medium-9 small-12 cell">
<h1>Articles</h1>
<div class="spacer large"></div>
<div class="articles-container">
<div class="article-item">
<div class="tag">Entertainment</div>
<div class="spacer small"></div>
<div>
<a>
<h3>Facebook refines its standalone VR headset with cheaper Oculus Quest 2</h3>
</a>
</div>
<div class="spacer x-small"></div>
<div class="publish-info">Published on September 8, 2020 Updated on April 22, 2021</div>
</div>
<div class="article-item">
<div class="tag">Technology</div>
<div class="spacer small"></div>
<div>
<a>
<h3>Nvidia's $40 billion arm deal might hit a snag with China</h3>
</a>
</div>
<div class="spacer x-small"></div>
<div class="publish-info">Published on Feb 8, 2020 Updated on March 22, 2021</div>
</div>
<div class="article-item">
<div class="tag">Technology</div>
<div class="spacer small"></div>
<div>
<a>
<h3>A data fail left banks and councils exposed by a quick Google search</h3>
</a>
</div>
<div class="spacer x-small"></div>
<div class="publish-info">Published on January 1, 2020 Updated on February 14, 2021</div>
</div>
</div>
</div>
</div>
</div>
<div class="spacer xxxx-large"></div>
<div class="grid-container">
<div class="pageinations grid-x align-right align-middle">
<div class="shrink cell">
<span class="per__page color-font-head form-label"><strong>Product 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 class="spacer xxxx-large"></div>
</div>
/* Start: INS Component Overwrite */
.blocks-sc-2col-08 .pageinations .ins-select-value-wrap{
width: 56px;
border: none;
}
.blocks-sc-2col-08 .paginate button:not([disabled]):hover {
background-color: var(--color-ui-01);
}
.blocks-sc-2col-08 .paginate button:not([disabled]):hover {
background-color: var(--color-ui-01);
}
.blocks-sc-2col-08 .paginate button:not([disabled]):hover .btn__icon.action {
color: var(--color-hover-main, #0964B8);
}
/* End: INS Component Overwrite */
.blocks-sc-2col-08 ul.side-links {
list-style: none;
margin-left: 0px;
}
.blocks-sc-2col-08 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-2col-08 ul.side-links li a:hover{
color: var(--color-main, #0964B8);
}
.blocks-sc-2col-08 .articles-container .article-item,
.blocks-sc-2col-08 .articles-container .article-item{
padding-top: 32px;
padding-bottom: 32px;
}
.blocks-sc-2col-08 .articles-container .article-item:first-child{
padding-top: 0px;
}
.blocks-sc-2col-08 .articles-container .article-item:last-child{
padding-bottom: 0px;
}
.blocks-sc-2col-08 .articles-container .article-item:not(:last-child){
border-bottom: solid 1px var(--color-ui-04, #E4E6EC);
}
.blocks-sc-2col-08 .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-2col-08 .articles-container .article-item a:hover,
.blocks-sc-2col-08 .articles-container .article-item a:hover h3{
color: var(--color-main, #0964B8);
}
.blocks-sc-2col-08 .articles-container .article-item .publish-info{
font-size: var(--typography-small, 0.875rem);
color: var(--color-font-body, #595959);
}
.blocks-sc-2col-08 .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-2col-08 .paginate > span,
.blocks-sc-2col-08 .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);
}