.g-imagegrid {
    *,  *:before,  *:after {
        box-sizing: border-box !important;
    }
    .g-imagegrid-wrapper {
        @include display(flex);
        @include flex-flow(row wrap);
        @include flex-wrap(wrap);
    }
    .g-imagegrid-item {
        @include flex(0 0 auto);
        width: 100%;
        display: inline-block;
        vertical-align: top;
        background: $accent-color-1;
        position: relative;
        img {
            opacity: 0.7;
            @include transition(all 0.35s);
        }
        &:hover {
            z-index: 10;
            img {
                opacity: 1;
                @include transform(scale(1.25));
            }
            .g-imagegrid-link:before {
                opacity: 1;
                @include transform(scale(1));
            }
        }
    }
    .g-imagegrid-desc {
        margin: 1.5rem 0;
    }
    .g-imagegrid-link {
        display: block;
        position: relative;
        background: $accent-color-1;
        @include transition(all 0.35s);
        &:before {
            color: $white;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 100%;
            font-family: FontAwesome;
            content: "\f002";
            font-size: 1rem;
            position: absolute;
            bottom: -0.5rem;
            right: -0.5rem;
            z-index: 1;
            opacity: 0;
            width: 35px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            @include transform(scale(0));
            @include transition(all 0.35s);
        }
    }
    .g-imagegrid-2cols {
        .g-imagegrid-item {
            width: 50%;
        }
    }
    .g-imagegrid-3cols {
        .g-imagegrid-item {
            width: 33.33333%;
        }
    }
    .g-imagegrid-4cols {
        .g-imagegrid-item {
            width: 25%;
        }
    }
    .g-imagegrid-5cols {
        .g-imagegrid-item {
            width: 20%;
            @include breakpoint(tablet-range) {
                width: 33.33333%;
            }
            @include breakpoint(mobile-only) {
                width: 50%;
            }
        }
    }
}