waffle grid thingy

[mhulse]

.waffle::after {
    content: "";
    display: table;
    clear: both;
}
.waffle * { color: #fff; }
.waffle > * {
    width: 100%;
    padding-bottom: 75%;
    float: left;
    display: inline;
    position: relative;
    overflow: hidden;
}
@media (min-width: 480px) {
    .waffle > * {
        width: 50%;
        padding-bottom: 50%;
    }
}
@media (min-width: 737px) {
    .waffle > * {
        width: 33.333333333333%;
        padding-bottom: 33.333333333333%;
    }
}
.waffle > * > * {
    border: 2px solid #0F717C;
    background-color: #138d9c;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70%;
    position: absolute;
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
}
.waffle > * > * > * {
    text-shadow: 0 0 .1em #000,
                 0 0 .025em #000,
                 0 0 .025em #000;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 10px;
    left: 10px;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
.waffle > * > a {
    -webkit-transition: all 200ms linear;
     -khtml-transition: all 200ms linear;
       -moz-transition: all 200ms linear;
        -ms-transition: all 200ms linear;
         -o-transition: all 200ms linear;
            transition: all 200ms linear;
}
.waffle > * > a,
.waffle > * > a:visited {
    color: #fff;
    text-decoration: none;
}
.waffle > * > a:visited:hover,
.waffle > * > a:focus,
.waffle > * > a:focus:hover,
.waffle > * > a:hover,
.waffle > * > a:active {
    color: #fff;
    text-decoration: none;
    border: 2px solid #ec7263;
    box-shadow: inset 0 0 250px rgba(9, 70, 78, .5); /* #09464e */
    background-color: #117E8C;
}

#program-guide { background-image: url(../images/open-book.svg); }
#videos { background-image: url(../images/video.svg); }
#practices {
    background-image: url(../images/feather.svg);
    background-size: 45%;
}
#massage-aids { background-image: url(../images/tools.svg); }
#what-if { background-image: url(../images/help-with-circle.svg); }
#resources { background-image: url(../images/flag.svg); }

<div class="waffle">

    <div>
        <a href="#" id="program-guide">
            <div>
                <h3 class="sh1">Program Guide</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

    <div>
        <a href="#" id="videos">
            <div>
                <h3 class="sh1">Videos</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

    <div>
        <a href="#" id="practices">
            <div>
                <h3 class="sh1">Practices</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

    <div>
        <a href="#" id="massage-aids">
            <div>
                <h3 class="sh1">Massage Aids</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

    <div>
        <a href="#" id="what-if">
            <div>
                <h3 class="sh1">What if?</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

    <div>
        <a href="#" id="resources">
            <div>
                <h3 class="sh1">Resources</h3>
                <p>Description goes here.</p>
            </div>
        </a>
    </div>

</div>

Example of one of the SVGs:

<svg xmlns="http://www.w3.org/2000/svg" width="19.86299" height="18.27354" viewBox="0 0 19.86299 18.27354">
<defs>
<style>
.a { fill: #0F717C; }
</style>
</defs>
<path class="a" d="M10.595,5.196l0.446,1.371a4.13455,4.13455,0,0,1,1.441-.795,8.743,8.743,0,0,1,1.582-.362l-0.43-1.323a9.4652,9.4652,0,0,0-1.58.368A5.25043,5.25043,0,0,0,10.595,5.196Zm0.927,2.855,0.446,1.371a4.13455,4.13455,0,0,1,1.441-.795,8.743,8.743,0,0,1,1.582-.362l-0.43-1.323a9.4652,9.4652,0,0,0-1.58.368A5.21076,5.21076,0,0,0,11.522,8.051Zm0.928,2.854,0.446,1.371a4.13455,4.13455,0,0,1,1.441-.795,8.743,8.743,0,0,1,1.582-.362l-0.43-1.323a9.4653,9.4653,0,0,0-1.58.368A5.20984,5.20984,0,0,0,12.45,10.905ZM5.388,13.077L5.818,14.4a8.74469,8.74469,0,0,1,1.492-.636,4.141,4.141,0,0,1,1.633-.203L8.497,12.19a5.24975,5.24975,0,0,0-1.615.257A9.40649,9.40649,0,0,0,5.388,13.077ZM3.533,7.368l0.43,1.323a8.82525,8.82525,0,0,1,1.492-.636,4.141,4.141,0,0,1,1.633-.203L6.643,6.48a5.2633,5.2633,0,0,0-1.616.258A9.40644,9.40644,0,0,0,3.533,7.368ZM4.46,10.223l0.43,1.323a8.74469,8.74469,0,0,1,1.492-.636,4.141,4.141,0,0,1,1.633-.203L7.57,9.335a5.24976,5.24976,0,0,0-1.615.257A9.41742,9.41742,0,0,0,4.46,10.223ZM11.064,1.41A5.25974,5.25974,0,0,0,8.011,3.969a5.25659,5.25659,0,0,0-3.973-.275A9.10909,9.10909,0,0,0,.069,6.321L4.164,18.908a0.49861,0.49861,0,0,0,.878.143,6.10376,6.10376,0,0,1,3.257-2.242,3.84475,3.84475,0,0,1,3.655.578,0.492,0.492,0,0,0,.762-0.268,3.84059,3.84059,0,0,1,2.61-2.593,6.09979,6.09979,0,0,1,3.956-.1,0.49619,0.49619,0,0,0,.625-0.629L15.819,1.203A9.11187,9.11187,0,0,0,11.064,1.41ZM10.951,15.256A5.20751,5.20751,0,0,0,7.81,15.3a8.53963,8.53963,0,0,0-2.699,1.404L1.866,6.722A6.62949,6.62949,0,0,1,4.528,5.201a3.90845,3.90845,0,0,1,3.279.378Zm6.894-2.689a8.54047,8.54047,0,0,0-3.01.451,5.20467,5.20467,0,0,0-2.567,1.81L9.124,5.151a3.899,3.899,0,0,1,2.43-2.233,6.63508,6.63508,0,0,1,3.047-.334Z" transform="translate(-0.069 -0.98333)"/>
</svg>

Example look/feel: