Story Matrix: Celestial Blue

<div style="padding: var(--size-4);">
    <h1 class="mexican-pink">
        Story Matrix
        <span class="token string" style="font-size: var(--font-size-2)">celestial-blue</span>
    </h1>
    <hr>
    <h3 class="celestial-blue">Circle</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Square</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue square">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 1</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue square size-1">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 2</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue square size-2">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 3</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue square size-3">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
    <h3 class="celestial-blue">Size 4</h3>
    <div style="padding: var(--size-4);">
        <div class="story-matrix celestial-blue square size-4">
            <div>
                <a href="#story" title="Story 1">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 1" />
                    <div>Story 1</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 2">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 2" />
                    <div>Story 2</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 3">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 3" />
                    <div>Story 3</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 4">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 4" />
                    <div>Story 4</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 5">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 5" />
                    <div>Story 5</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 6">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 6" />
                    <div>Story 6</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 7">
                    <img src="/components/raw/story-button/story-1.jpg" alt="Story 7" />
                    <div>Story 7</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 8">
                    <img src="/components/raw/story-button/story-2.jpg" alt="Story 8" />
                    <div>Story 8</div>
                </a>
            </div>
            <div>
                <a href="#story" title="Story 9">
                    <img src="/components/raw/story-button/story-3.jpg" alt="Story 9" />
                    <div>Story 9</div>
                </a>
            </div>
        </div>
    </div>
</div>