<!--
Purpose: Left-right comparison page
Variables:
  - TITLE: Page title
  - LEFT_TITLE: Left side title
  - LEFT_POINTS: Left side points
  - RIGHT_TITLE: Right side title
  - RIGHT_POINTS: Right side points
Features: Two-column layout + contrasting colors + left-right slide-in animation
-->
<section>
    <style>
        .comparison-title {
            margin-bottom: 30px;
        }
        .comparison-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            height: 70%;
            padding: 0 20px;
        }
        .comparison-side {
            display: flex;
            flex-direction: column;
            padding: 25px;
            border-radius: 12px;
            text-align: left;
        }
        .side-left {
            background: linear-gradient(180deg, rgba(233,69,96,0.1) 0%, transparent 100%);
            border-top: 3px solid #e94560;
        }
        .side-right {
            background: linear-gradient(180deg, rgba(88,166,255,0.1) 0%, transparent 100%);
            border-top: 3px solid #58a6ff;
        }
        .side-title {
            font-size: 1.2em;
            margin: 0 0 20px 0;
        }
        .side-left .side-title { color: #e94560; }
        .side-right .side-title { color: #58a6ff; }
        .side-list {
            font-size: 0.85em;
            line-height: 1.8;
            margin: 0;
            padding-left: 20px;
        }
        .side-list li {
            margin-bottom: 8px;
            color: #c9d1d9;
        }
    </style>

    <h2 class="comparison-title">TITLE</h2>

    <div class="comparison-container">
        <div class="comparison-side side-left fragment fade-right">
            <h3 class="side-title">LEFT_TITLE</h3>
            <ul class="side-list">
                <li>Left point 1</li>
                <li>Left point 2</li>
                <li>Left point 3</li>
            </ul>
        </div>
        <div class="comparison-side side-right fragment fade-left">
            <h3 class="side-title">RIGHT_TITLE</h3>
            <ul class="side-list">
                <li>Right point 1</li>
                <li>Right point 2</li>
                <li>Right point 3</li>
            </ul>
        </div>
    </div>
</section>
