You can create custom column layouts using the candlepin-style modifiers for .section__item, however you want something fancier than a single column going to a single row, you’ll have to at least adjust margins yourself or with the candlepin utility classes.

This is powered by including the mixin grid-utilities from Candlepin, which provides modifiers for .-gutter, .-gutter-#, .-span-#, .left-#, and .right-#.

<section class=" section -designedSection">
    <div class="section__container container">
        <header class="section__header">
            <div class="eyebrow -primary">interesting eyebrow</div>
        </header>
        <div class="section__content -columns">
            <div class="section__item -span-8">
                <svg viewBox="0 0 100 50">
                    <rect height="50" width="100" style="fill-opacity:.05" />
                </svg>
            </div>
            <div class="section__item -span-4">
                <h3 class="section__subheading">Elit nulla quas possimus exercitationem</h3>
                <p>Consectetur alias placeat doloremque placeat asperiores Reprehenderit corporis atque amet sunt ullam assumenda delectus. Molestiae sapiente laudantium officia asperiores excepturi. Earum tempora labore neque quia accusantium molestiae unde facere? Dolor.</p>
            </div>
        </div>
    </div>
</section>