<ol class="post-card-box clearfix">
    <li>
        <div class="post-card light-grey">
            <a href="{{site.baseurl}}/collections/ratings/g" class="post-card-image">
            </a>

            <div class="post-card-body">
                <a href="{{site.baseurl}}/collections/ratings/g" class="tag">Stories with minimal violence and sex</a>
                <a href="{{site.baseurl}}/collections/ratings/g" class="post-card-link"><h3 class="post-card-title">Rated G</h3></a>
            </div>
        </div>
    </li>
    <li>
        <div class="post-card light-purple">
            <a href="{{site.baseurl}}/collections/ratings/r" class="post-card-image">
            </a>

            <div class="post-card-body">
                <a href="{{site.baseurl}}/collections/ratings/r" class="tag">Stories with some violence or sex</a>
                <a href="{{site.baseurl}}/collections/ratings/r" class="post-card-link"><h3 class="post-card-title">Rated R</h3></a>
            </div>
        </div>
    </li>
    <li>
        <div class="post-card light-pink">
            <a href="{{site.baseurl}}/collections/ratings/x" class="post-card-image">
            </a>

            <div class="post-card-body">
                <a href="{{site.baseurl}}/collections/ratings/x" class="tag">Stories with graphic depictions of violence or sex</a>
                <a href="{{site.baseurl}}/collections/ratings/x" class="post-card-link"><h3 class="post-card-title">Rated X</h3></a>
            </div>
        </div>
    </li>
</ol>
