2 Column 10

Breakpoint is limited based on your device or window size.

<div class="blocks-sc-2col-10 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-8 medium-7 small-12 cell">
        <a>
          <h3>Some of the ways to help our clients:</h3>
        </a>
        <div class="spacer"></div>
        <div class="description">
          <ul>
            <li>
              <p>Custom Forms</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Notifications</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Online Payments</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Free SSL</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Managed Service</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Content Management System</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Publish Data</p>
              <div class="spacer x-small"></div>
            </li>
            <li>
              <p>Engage more users with unique content per location.</p>
              <div class="spacer x-small"></div>
            </li>
          </ul>
          <div class="spacer"></div>
          <p>
            As part of the Insites License Fee, you will receive regular maintenance updates for your version of the
            software. If you choose a Combinate Management Plan, we will handle all updates and minor fixes to keep your
            project up to date. You can focus more of your budget towards building features or improvements that you
            want to see.<br /><br />

            Insites charge a Licence Fee for access to the platform. We charge a Customisation Fee to configure the
            platform to your business. This cost is much lower than building all of the software from scratch.
          </p>
        </div>
      </div>
      <div class="large-4 medium-5 small-12 cell">
        <div class="spacer xxx-large show-for-small-only"></div>
        <!-- accordion section holder -->
        <div class="accordion-section-holder">
          <div class="spacer"></div>
          <a>
            <h3>Insites Platform</h3>
          </a>
          <div class="spacer"></div>
          <div class="description">
            <!-- accordion -->
            <ins-accordion menu>
  
              <ins-accordion-item heading="Custom Forms" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Notifications" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Online Payments" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Free SSL" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Managed Service" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
            </ins-accordion>
            <!-- /accordion -->
          </div>
          <div class="spacer"></div>
        </div>
        <!-- /accordion section holder -->

        <div class="spacer"></div>

        <!-- accordion section holder -->
        <div class="accordion-section-holder">
          <div class="spacer"></div>
          <a>
            <h3>You may find these White Papers useful:</h3>
          </a>
          <div class="spacer"></div>
          <div class="description">
            <!-- accordion -->
            <ins-accordion menu>
  
              <ins-accordion-item heading="Content Management System" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Contact Management" link="/web-components/v2-accordion">
                </ins-accordion-link>
                <ins-accordion-link label="Repositories" link="/web-components/v2-accordion">
                </ins-accordion-link>
                <ins-accordion-link label="Publish Data" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Custom Relationship Management" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Database Builder" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Secure Zones" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
              <ins-accordion-item heading="Single Management" open-icon="icon-plus" close-icon="icon-minus">
                <ins-accordion-link label="Only Label" link="/web-components/v2-accordion">
                </ins-accordion-link>
              </ins-accordion-item>
  
            </ins-accordion>
            <!-- /accordion -->
          </div>
          <div class="spacer"></div>
        </div>
        <!-- /accordion section holder -->
      </div>
    </div>
    <div class="spacer x-large"></div>
  </div>
</div>
.blocks-sc-2col-10 h3 {
  line-height: 29px;
}

.blocks-sc-2col-10 .accordion-section-holder {
  background-color: var(--color-ui-03, #F2F4F8);
  padding-left: 24px;
  padding-right: 24px;
}

.blocks-sc-2col-10 .ins-accordion-item.open>.ins-accordion-item_header>.inner-head,
.blocks-sc-2col-10 .ins-accordion-item_content .ins-accordion-link,
.blocks-sc-2col-10 .ins-accordion-item,
.blocks-sc-2col-10 .ins-accordion-item_header>.inner-head {
  background-color: var(--color-ui-03, #F2F4F8);
}

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

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

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

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

.blocks-sc-2col-10 .ins-accordion.menu .ins-accordion-item .inner-head span,
.blocks-sc-2col-10 .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;
}

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

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