Text Banner XL Centered

<!-- .tbxlc -->
<div class="tbxlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow-sm opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-8xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow">
                <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a>
            </div>
			
        </div>
    </div>
</div>

<!-- .tbxlc -->
<div class="tbxlc // p--xl">

    <!-- .subsection -->
    <div class="subsection // flex flex-col items-center // max-w--doc">

        <!-- .core -->
        <div class="core // flex flex-col items-center // text-center">

            <!-- .eyebrow -->
            <p class="eyebrow // type-eyebrow-sm opacity-sm">Lorem Ipsum</p>

            <!-- .headline -->
            <p class="headline // max-w-head // type-8xl">A sensible, responsive starting point for Beaver Builders.</p>

            <!-- .subhead -->
            <p class="subhead // max-w-subhead // opacity-md type-lg">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellat blanditiis culpa necessitatibus facilis obcaecati dolorum.</p>

            <!-- .cta -->
            <div class="cta // mt-sm // bg-a-600 hover:bg-a-700 text-p-50 rounded-button shadow">
                <a class="inline-block px-5 py-3 // type-button" href="#">Get Started</a>
            </div>
			
        </div>
    </div>
</div>