2 Column 11

<div class="blocks-sc-2col-11 wrapper bg-color-ui-01">
  <div class="grid-container">
    <div class="spacer x-large"></div>
    <div class="grid-x gutter-medium grid-padding-x">
      <div class="large-4 medium-5 small-12 cell">
        <!-- accordion section holder -->
        <div class="accordion-section-holder hide-for-small-only">
          <h4>Web Components</h4>
          <div class="spacer"></div>
          <div class="description">
            <!-- accordion -->
            <ins-accordion menu>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/">
                </ins-accordion-link>


              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion>

                  <ins-accordion-link label="Level 2" link="/">
                  </ins-accordion-link>


                  <ins-accordion-item class="level-2-parent" heading="Level 2" open-icon="icon-plus"
                    close-icon="icon-minus">



                    <ins-accordion-link class="level-3-item" label="Level 3" link="/">
                    </ins-accordion-link>

                    <ins-accordion-link class="level-3-item" label="Level 3" link="/">
                    </ins-accordion-link>



                  </ins-accordion-item>

                </ins-accordion>
              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Level 2" link="/">
                </ins-accordion-link>
              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Level 2" link="/">
                </ins-accordion-link>
              </ins-accordion-item>



            </ins-accordion>
            <!-- /accordion -->
          </div>
          <div class="spacer"></div>
        </div>

        <div class="content show-for-small-only">
          <h1>User Interface Design System</h1>
        <div class="spacer"></div>
        <p>Your journey to application nirvana starts by designing your application utilising our User Interface Design
          System, which has been carefully handcrafted in Sketch, which would make your designer blush with excitement.
          <br /><br />
          There are hundreds of Design Elements available to create a stunning user experience, all while having the
          complete confidence that each one has been developed as a Code Element for your developers to use when it
          comes to bringing you beauty to life.</p>
        </div>
        <!-- /accordion section holder -->
      </div>
      <div class="large-8 medium-7 small-12 cell">
        <div class="spacer xxx-large show-for-small-only"></div>
        <!-- right content -->
        <div class="content hide-for-small-only">
          <h1>User Interface Design System</h1>
        <div class="spacer"></div>
        <p>Your journey to application nirvana starts by designing your application utilising our User Interface Design
          System, which has been carefully handcrafted in Sketch, which would make your designer blush with excitement.
          <br /><br />
          There are hundreds of Design Elements available to create a stunning user experience, all while having the
          complete confidence that each one has been developed as a Code Element for your developers to use when it
          comes to bringing you beauty to life.</p>
        </div>

        <div class="accordion-section-holder show-for-small-only">
          <h4>Web Components</h4>
          <div class="spacer"></div>
          <div class="description">
            <!-- accordion -->
            <ins-accordion menu>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/">
                </ins-accordion-link>


              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion>

                  <ins-accordion-link label="Level 2" link="/">
                  </ins-accordion-link>


                  <ins-accordion-item class="level-2-parent" heading="Level 2" open-icon="icon-plus"
                    close-icon="icon-minus">



                    <ins-accordion-link class="level-3-item" label="Level 3" link="/">
                    </ins-accordion-link>

                    <ins-accordion-link class="level-3-item" label="Level 3" link="/">
                    </ins-accordion-link>



                  </ins-accordion-item>

                </ins-accordion>
              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Level 2" link="/">
                </ins-accordion-link>
              </ins-accordion-item>

              <ins-accordion-item heading="Level 1" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Level 2" link="/">
                </ins-accordion-link>
              </ins-accordion-item>



            </ins-accordion>
            <!-- /accordion -->
          </div>
          <div class="spacer"></div>
        </div>
        <!-- /right content -->
      </div>
    </div>
    <div class="spacer x-large"></div>
  </div>
</div>

/* sc-2col-11 */
.blocks-sc-2col-11 h3 {
  line-height: 29px;
}

.blocks-sc-2col-11 .accordion-section-holder {
  background-color: var(--color-font-inv);
  padding-left: 24px;
  padding-right: 24px;
}

.blocks-sc-2col-11 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head,
.blocks-sc-2col-11 .ins-accordion-item_content .ins-accordion-link,
.blocks-sc-2col-11 .ins-accordion-item,
.blocks-sc-2col-11 .ins-accordion-item_header>.inner-head {
  background-color: var(--color-font-inv);
}

.blocks-sc-2col-11 .ins-accordion-item_content .ins-accordion-link {
  border-bottom: unset;
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item_content .ins-accordion-link_link span,
.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head span {
  color: var(--color-font-body, #595959);
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item_content .ins-accordion-link_link:hover {
  text-decoration: none;
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head {
  padding: 14px;
  padding-left: 0;
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head span,
.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item_content .ins-accordion-link_link span {
  font-size: var(--typography-small, 0.875rem);
  font-family: var(--font-family-01, sans-serif);
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-font-sub);
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head,
.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head,
.blocks-sc-2col-11 .ins-accordion.menu ins-accordion-item:first-of-type .ins-accordion-item_header {
  border: 0;
}

.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item .inner-head:hover,
.blocks-sc-2col-11 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover,
.blocks-sc-2col-11 .ins-accordion.menu .ins-accordion-item.open>.ins-accordion-item_header>.inner-head:hover {
  background-color: unset;
}

.blocks-sc-2col-11 h1 {
  line-height: var(--typography-xxxx-large);
}

.blocks-sc-2col-11 h4 {
  font-size: var(--typography-large);
  line-height: 22px;
}

.blocks-sc-2col-11 .ins-accordion.menu ins-accordion-item.level-2-parent div.inner-head {
  padding-left: 14px;
}

.blocks-sc-2col-11 .ins-accordion.menu ins-accordion-item.level-2-parent .level-3-item a {
  padding-left: 28px;
}

@media screen and (max-width: 639px) {
  .blocks-sc-2col-11 .accordion-section-holder {
    padding-left: 0;
    padding-right: 0;
  }
}

/* end sc-2col-11 */