Story Button Group: Surface 2

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