scratchx/sass/_gallery.scss

.gallery {
    background: $gallery-background-color;

    div {
        padding: $vertical-base * 10 0;
    }

    ul {
        @include outer-container;
        @include reset-display;
        padding-left: 0;
    }

    li {
        /* Grid of 3 wide */
        @include span-columns(4);
        @include omega(3n);
        margin-bottom: $gutter;

        overflow: hidden;
        border-radius: $base-border-radius;

        section, header {
            padding: $gutter;
            background-color: $base-background-color;
            font-size: $small-font-size;

            p {
                margin-bottom: 0;
                text-align: left;
            }
        }

        header {
            background-color: $bright-blue;
            color: $white;
            position: relative;

            @include icon(before, right-arrow) {
                position: absolute;
                font-size: 1.5em;
                line-height: 1.5;
                right: $gutter;
            }

            h2 {
                font-size: $h3-font-size;
                margin-bottom: 0;
                line-height: 1;
            }
        }

        img {
            display: block;
            height: 150px;
        }

        .description {
            overflow: hidden;

            a {
                width: 50%;
                float: left;
                display: block;
            }

        }

        .tags {
            border-top: $base-border;
        }
    }


}

aside + .gallery {
    margin-top: $vertical-base * -4;
}

.tag {

    &:before {
        padding-right: $vertical-base;
    }

    &.web {
        @include icon(before, wifi) {
            font-size: 1.25em;
            display: inline-block;
            vertical-align: baseline;
        }
    }

    &.hardware {
        @include icon(before, gear) {
            font-size: 1.5em;
            display: inline-block;
            vertical-align: middle;
        }
    }
}