// //////////////////////////////////////////
// // GALLERY MODULE
// //////////////////////////////////////////

.gallery-grid-module {

    .module-content{
        @include module-content($gallery-module-width)
    }

    @for $i from 1 through $gallery-max-cols {

        .img-grid-#{$i} {

            li {
                width: percentage(1/$i);

                @include break(mp){
                    width: percentage(1/2);
                }
            }
        }
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0 percentage($gallery-spacing/$grid-width)*-1;
        @include flex;
        @include flex-wrap(wrap);

        > li {
            position: relative;
            padding: percentage($gallery-spacing/$grid-width);
        } 
    }

     a {
        display: block;
        cursor: pointer;
        padding-top: 100%;
        background-size: cover;
        background-position: center center;
    }

    figcaption{
        margin: 0.5rem 0;
        padding: 0;
        color: $text-grey;
        font-size: rem(14);
        position: relative;
    }
}