Grid - Flex

<div class="flex flex-col md:flex-row gap-xs lg:gap-lg xl:gap-xl 2xl:gap-2xl text-white rs-mb-2">
  <div class="w-full md:w-1/2 bg-lagunita rs-p-2">
    <h3>6 of 12 columns</h3>
    <p class="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
      columns for MD and up; responsive grid gaps.</p>
  </div>
  <div class="w-full md:w-1/2 bg-palo-verde-dark rs-p-2">
    <h3>6 of 12 columns</h3>
    <p class="card-paragraph">This column stacks vertically for XS-SM breakpoints and spans 6 of 12
      columns for MD and up; responsive grid gaps.</p>
  </div>
</div>
<div class="flex flex-col sm:flex-row grid-gap rs-mb-2 text-white">
  <div class="w-full sm:w-1/2 lg:w-3/4 bg-plum rs-p-2">
    <h3>8 of 12 columns</h3>
    <p class="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
      SM-MD; spans 8 of 12 columns for LG and up; responsive column gaps using .grid-gap class.</p>
  </div>
  <div class="w-full sm:w-1/2 lg:w-1/4 bg-plum-dark rs-p-2">
    <h3>4 of 12 columns</h3>
    <p class="card-paragraph">This column stacks vertically for XS breakpoint; spans 6 of 12 columns for
      SM-MD; spans 4 of 12 columns for LG and up; responsive column gaps using .grid-gap class.</p>
  </div>
</div>