.ce-gallery{
    @include xy-grid();
    @include xy-gutters($negative: true);

    .ce-textpic &{
        display: block;
    }

    .magic-popup {
        overflow: hidden;

        &::after {
            content: normal;
        }

        img {
            position: relative;
            display: block;
            width: 100%;
            cursor: zoom-in;
            transition: transform 250ms;

            &:hover {
                z-index: 1;
                transform: scale(1.10);
            }

            &:hover:after {
                content: normal;
            }
        }
    }

    .image{
        @include xy-cell();
        display: flex;
        align-items: center;
    }

    img{
        width: 100%;
    }

    @include breakpoint($mobile-m) {

        &[data-cols="2"] {
            .image {
                @include xy-cell-size(6);
            }
        }

        &[data-cols="3"] {
            .image {
                @include xy-cell-size(6);
            }
        }
    }

    @include breakpoint($mobile-l) {
        &[data-cols="3"] {
            .image {
                @include xy-cell-size(4);
            }
        }
    }
}