<!-- ============================================================
SCROLLYSPLIT
Two-column layout for text + image, image + text, text + text, or quote + text.

TO USE:
1. Paste ScrollyCore once near the top of the Squarespace page.
2. Paste this block where you want a two-column layout.
3. Change the text.
4. Replace the image URL and alt text.
5. Change ratio if desired:
   - ratio-50-50
   - ratio-30-70
   - ratio-70-30
6. Optional: swap left and right sides by moving the text-card and media-card.

GOOD FOR:
- comparison
- tension between two ideas
- text beside an image
- quote beside explanation
- before/after framing

BEGINNER KNOBS:
- ratio-50-50 / ratio-30-70 / ratio-70-30 controls column balance
- LEFT SIDE controls the first column
- RIGHT SIDE controls the second column
- class="cover" keeps the image cropped neatly
============================================================ -->

<section class="section">
  <div class="section-inner split ratio-50-50 fade-in">

    <!-- LEFT SIDE -->
    <div class="text-card">

      <div class="section-label">
        Optional label
      </div>

      <h2>
        Your title here
      </h2>

      <p>
        Your paragraph here.
      </p>

    </div>

    <!-- RIGHT SIDE -->
    <figure class="media-card">
      <img
        src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1200&q=80"
        alt="Describe image here"
        class="cover"
      />

      <figcaption class="caption">
        Optional caption
      </figcaption>
    </figure>

  </div>
</section>