.pix_masonry {
    display: inline-block;
    width: 100%;

    .grid-item,
    .grid-sizer {
        width: 32%;
    }

    &.pix_masonry_2 {
        .grid-item,
        .grid-sizer {
            width: 48%;
        }
    }
    &.pix_masonry_3 {
        .grid-item,
        .grid-sizer {
            width: 31.33%;
        }
    }
    &.pix_masonry_4 {
        .grid-item,
        .grid-sizer {
            width: 23%;
        }
    }
    &.pix_masonry_5 {
        .grid-item,
        .grid-sizer {
            width: 18%;
        }
    }

    &.pix-4-columns {
        .grid-item,
        .grid-sizer {
            width: 23.5%;
        }
        .grid-item--width2 {
            width: 48.5%;
        }
    }
    &.gutter-0 {
        .grid-item,
        .grid-sizer {
            width: 33.3333333333%;
        }
        .grid-item--width2 {
            width: 66.6666666667%;
        }
        .gutter-sizer {
            width: 0%;
        }
        &.pix-4-columns {
            .grid-item,
            .grid-sizer {
                width: 25%;
            }
            .grid-item--width2 {
                width: 50%;
            }
        }
    }

    .grid-item {
        float: left;
        display: inline-block;
    }
    .grid-item--width2 {
        width: 66%;
    }
    .gutter-sizer {
        width: 2%;
        &.gutter-0 {
            width: 0%;
        }
    }

    /* clear fix */
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.template-blog-without-sidebar,
.template-blog-full-width,
.template-blog-left-sidebar,
.template-blog-with-offset {
    .pix_masonry {
        margin-left: 1%;
    }
}

@media (max-width: 768px) {
    .grid-item,
    .grid-sizer,
    .grid-item--width2,
    .grid-col-8,
    .grid-col-4 {
        width: 100% !important;
    }
    .gutter-sizer {
        width: 0% !important;
    }
}
.pix-bg-image {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.pix-shop-category .pix-bg-image {
    height: 100% !important;
}
.pix-img-overlay {
    z-index: 2;
    position: relative;
    display: inline-block;
}
// Gallery styles
.pix-gallery-item {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    &.pix-gallery-sm {
        height: 300px !important;
    }
    &.pix-gallery-lg {
        height: 620px !important;
    }
}
.gutter-0 .pix-gallery-item {
    &.pix-gallery-lg {
        height: 600px !important;
    }
}
.pix-lightbox-item {
    &:focus,
    &:active {
        outline: none;
    }
}
