.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: middle;
        position: relative;
        border-radius: 0.5rem;

        img {
            @include transition(all 0.35s);
            width: 100%;
            height: 100%;
            border-radius: 0.5rem;
        }
        .g-imagegrid-caption {
            @include display(flex);
            @include justify-content(center);
            color: $white;
            font-weight: $font-weight-bold;
            left: 0;
            right: 0;
            margin-left: auto;
            margin-right: auto;
            z-index: 1;
        }
        .indicator {
            @include display(flex);
            @include align-items(center);
            @include justify-content(center);
            color: $white;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            div {
                @include responsive-font($responsive-font-size + 0.8, $core-font-size, false, false);
                max-width: 100%;
                text-align: center;
                flex: none;
                -webkit-flex: none;
                font-weight: bold;
                .dir-rtl & {
                    margin-right: 0;
                }
                opacity: 0;
                @include transform(scale(0));
                @include transition(all 0.35s);

                .fa {
                    font-size: $core-font-size + 3;
                }
            }
        }
        &:hover {
            z-index: 10;
            .g-imagegrid-link:before {
                opacity: 1;
                @include transform(scale(1));
            }
            .indicator div {
                opacity: 1;
                @include transform(scale(1));
            }
        }
    }
    .g-imagegrid-desc {
        margin: 1.5rem 0;
    }
    .g-imagegrid-link {
        @include display(flex);
        position: relative;
        width: 100%;
        height: 100%;
        @include transition(all 0.35s);
        &:before {
            color: $white;
            background: transparentize($black, 30%);
            border-radius: 0.5rem;
            content: "";
            position: absolute;
            z-index: 1;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            text-align: center;
            @include transform(scale(0));
            @include transition(all 0.35s);
        }
    }

    .g-imagegrid-2cols {
        .g-imagegrid-item {
            width: 50%;

            @include breakpoint(mobile-only) {
                width: 100%;
            }
        }
    }
    .g-imagegrid-3cols {
        .g-imagegrid-item {
            width: 33.33333%;
            &:first-child {
                padding-right: $content-padding;

                .dir-rtl & {
                    padding-left: $content-padding;
                    padding-right: 0;
                }

                @include breakpoint(mobile-only) {
                  padding: 0;
                }
            }

            &:last-child {
                padding-left: $content-padding;

                .dir-rtl & {
                    padding-right: $content-padding;
                    padding-left: 0;
                }

                @include breakpoint(mobile-only) {
                  padding: 0;
                }
            }

            @include breakpoint(mobile-only) {
                width: 100%;
                margin-bottom: $content-padding;
            }
        }
    }
    .g-imagegrid-4cols {
        .g-imagegrid-item {
            width: 25%;
            @include breakpoint(tablet-range) {
                width: 50%;
            }
            @include breakpoint(mobile-only) {
                width: 100%;
            }
        }
    }
    .g-imagegrid-5cols {
        .g-imagegrid-item {
            width: 20%;
            @include breakpoint(tablet-range) {
                width: 33.33333%;
            }
            @include breakpoint(mobile-only) {
                width: 50%;
            }
        }
    }
}