Grid of Guides Cards: Hub

<div class="b b--fw">
    <div class="b-c">
        <div class="sh">
            <h2 class="sh-title">City Guides</h2>
        </div>
        <div class="g">
            <div class="m-t500 g--4 g--4--sl">
                <a href="https://www.boston.gov/neighborhood/allston" class="gcd">
                    <div class="gcd-ic" style="background-image: url(https://patterns.boston.gov/assets/images/fleet/allston2.jpg)"></div>
                    <div class="gcd-c">
                        <div class="gcd-st">Guide:</div>
                        <div class="gcd-t">Affordable housing in Boston</div>
                    </div>
                </a>
                <div class="gcd-lst">
                    <ul class="ul">
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Speed limit sign needed</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Excessive noise</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a speedbump</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a<br />traffic study</a></li>
                    </ul>
                </div>
            </div>
            <div class="m-t500 g--4 g--4--sl">
                <a href="https://www.boston.gov/neighborhood/allston" class="gcd">
                    <div class="gcd-ic" style="background-image: url(https://patterns.boston.gov/assets/images/fleet/allston2.jpg)"></div>
                    <div class="gcd-c">
                        <div class="gcd-st">Guide:</div>
                        <div class="gcd-t">Buying and owning a home</div>
                    </div>
                </a>
                <div class="gcd-lst">
                    <ul class="ul">
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Speed limit sign needed</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Excessive noise</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a speedbump</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a<br />traffic study</a></li>
                    </ul>
                </div>
            </div>
            <div class="m-t500 g--4 g--4--sl">
                <a href="https://www.boston.gov/neighborhood/allston" class="gcd">
                    <div class="gcd-ic" style="background-image: url(https://patterns.boston.gov/assets/images/fleet/allston2.jpg)"></div>
                    <div class="gcd-c">
                        <div class="gcd-st">Guide:</div>
                        <div class="gcd-t">Contracting with the City</div>
                    </div>
                </a>
                <div class="gcd-lst">
                    <ul class="ul">
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Speed limit sign needed</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Excessive noise</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a speedbump</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a<br />traffic study</a></li>
                    </ul>
                </div>
            </div>
            <div class="m-t500 g--4 g--4--sl">
                <a href="https://www.boston.gov/neighborhood/allston" class="gcd">
                    <div class="gcd-ic" style="background-image: url(https://patterns.boston.gov/assets/images/fleet/allston2.jpg)"></div>
                    <div class="gcd-c">
                        <div class="gcd-st">Guide:</div>
                        <div class="gcd-t">Dealing with natural disasters</div>
                    </div>
                </a>
                <div class="gcd-lst">
                    <ul class="ul">
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Speed limit sign needed</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Excessive noise</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a speedbump</a></li>
                        <li class="gcd-lst-li t--sans tt-u"><a href="javascript:void(0)">Request a<br />traffic study</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>