2 Column 7

<div class="blocks-sc-2col-07 wrapper bg-color-ui-01">
    <div class="spacer xxxx-large"></div>
    <div class="grid-container">
        <div class="grid-x grid-padding-x gutter-medium">
            <div class="large-3 medium-3 small-12 cell">
                <h4>FAQ</h4>
                <div class="spacer large"></div>
                <ul class="side-links">
                    <li>
                        <a>All</a>
                        <div class="spacer small"></div>
                    </li>
                    <li>
                        <a>Order</a>
                        <div class="spacer small"></div>
                    </li>
                    <li>
                        <a>Shipping</a>
                        <div class="spacer small"></div>
                    </li>
                    <li>
                        <a>Payment</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>FAQ</h1>
                <div class="spacer large"></div>
                <div class="faqs-holder">
                    <ins-accordion>
                        <ins-accordion-item 
                            heading="How do I track my order status?" 
                            open-icon="icon-plus" 
                            close-icon="icon-minus" 
                            active>              
                            This accordion is nested and it holds 2 more accordion inside.              
                            <ins-accordion>          
                                <ins-accordion-item 
                                    heading="Open Book">                  
                                    This accordion is nested inside an accordion element.                  
                                </ins-accordion-item>          
                                <ins-accordion-item 
                                    heading="Closed Book">                  
                                    This accordion is also nested inside an accordion element.                  
                                </ins-accordion-item>          
                            </ins-accordion>          
                        </ins-accordion-item>          
                        <ins-accordion-item
                            open-icon="icon-plus" 
                            close-icon="icon-minus"  
                            heading="How do I return defective or flawed items?">          
                            This is just a single accordion element.          
                        </ins-accordion-item>          
                        <ins-accordion-item 
                            open-icon="icon-plus" 
                            close-icon="icon-minus" 
                            heading="Can I exchange my order?">
                            <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
                            <div class="spacer small"></div>
                            <hr>
                            <div class="spacer small"></div>
                            <div class="grid-x align-justify">
                                <div class="medium-shrink small-12 cell">
                                    Packaging Guide.pdf
                                </div>
                                <div class="spacer small cell hide-for-medium"></div>
                                <div class="medium-shrink small-12 cell">
                                    <ins-button 
                                        icon="icon-download" 
                                        label="Download" 
                                        solid 
                                        color="blue" 
                                        size="small">
                                    </ins-button>
                                </div>
                            </div>
                        </ins-accordion-item>          
                    </ins-accordion>
                </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-07 .ins-accordion-item_header > .inner-head {
  padding: 16px;
}

.blocks-sc-2col-07 .ins-accordion-item_content .inner-content{
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
}

.blocks-sc-2col-07 .ins-accordion-item_content .inner-content .inner-head{
  border: var(--ins-border-style) var(--ins-border-thickness) var(--ins-border-color);
}

.blocks-sc-2col-07 .faqs-holder > ins-accordion > .ins-accordion > ins-accordion-item:first-child .ins-accordion-item_header{
  padding-top: 0px;;
}

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

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

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

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

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

.blocks-sc-2col-07 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-07 ul.side-links li a:hover{
  color: var(--color-main, #0964B8);
}

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