2 Column 6

<div class="blocks-sc-2col-06 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-7 medium-6 small-12 cell">
        <h2>FAQ</h2>
        <div class="spacer small"></div>
        <a class="button-default color-main">View All</a>
        <div class="spacer x-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 class="large-5 medium-6 small-12 cell">
        <div class="spacer xxx-large show-for-small-only"></div>
        <h2>Articles</h2>
        <div class="spacer small"></div>
        <a class="button-default color-main">View All</a>
        <div class="spacer x-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>

/* 2col-06 */
.blocks-sc-2col-06 .ins-accordion-item_header > .inner-head {
  padding: 16px;
}

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

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

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

.blocks-sc-2col-06 .articles-container .article-item,
.blocks-sc-2col-06 .articles-container .article-item{
  padding-top: 32px;
  padding-bottom: 32px;
}
.blocks-sc-2col-06 .articles-container .article-item:first-child{
  padding-top: 0px;
}
.blocks-sc-2col-06 .articles-container .article-item:last-child{
  padding-bottom: 0px;
}

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

.blocks-sc-2col-06 .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-06 .articles-container .article-item a:hover,
.blocks-sc-2col-06 .articles-container .article-item a:hover h3{
  color: var(--color-main, #0964B8);
}

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

.blocks-sc-2col-06 h2 {
  line-height: 38px;
}
/* end 2col-06 */