// Masonry container styles
.wp-block-query:has(.ph-ql-masonry) {
    overflow: hidden;
}

body .is-layout-grid {
    &.ph-ql-masonry {
        .ph-ql-masonry-sizer {
            height: 0;
            visibility: hidden;
            pointer-events: none;
            padding: 0;
        }
    }

    &.ph-ql-masonry.ph-ql-masonry-init {
        display: flex;
        flex-flow: row wrap;
        max-width: none;
        margin: calc(var(--half-gap) * -1) !important;
        position: relative;

        .ph-ql-masonry-sizer {
            margin: var(--half-gap);
        }

        li.wp-block-post {
            min-height: 0;
            min-width: 0;
            box-sizing: border-box;
            margin: var(--half-gap);
        }

        &.columns-1 {
            .ph-ql-masonry-sizer {
                flex: 0 0 100%;
                width: 100%;
            }
            li.wp-block-post {
                flex: 0 0 100%;
                width: 100%;
            }
        }

        &.columns-2 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(50% - var(--gap));
                width: calc(50% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(50% - var(--gap));
                width: calc(50% - var(--gap));
            }
        }

        &.columns-3 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(33.333% - var(--gap));
                width: calc(33.333% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(33.333% - var(--gap));
                width: calc(33.333% - var(--gap));
            }
        }

        &.columns-4 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(25% - var(--gap));
                width: calc(25% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(25% - var(--gap));
                width: calc(25% - var(--gap));
            }
        }

        &.columns-5 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(20% - var(--gap));
                width: calc(20% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(20% - var(--gap));
                width: calc(20% - var(--gap));
            }
        }
        
        &.columns-6 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(16.666% - var(--gap));
                width: calc(16.666% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(16.666% - var(--gap));
                width: calc(16.666% - var(--gap));
            }
        }

        &.columns-7 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(14.285% - var(--gap));
                width: calc(14.285% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(14.285% - var(--gap));
                width: calc(14.285% - var(--gap));
            }
        }

        &.columns-8 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(12.5% - var(--gap));
                width: calc(12.5% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(12.5% - var(--gap));
                width: calc(12.5% - var(--gap));
            }
        }

        &.columns-9 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(11.111% - var(--gap));
                width: calc(11.111% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(11.111% - var(--gap));
                width: calc(11.111% - var(--gap));
            }
        }

        &.columns-10 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(10% - var(--gap));
                width: calc(10% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(10% - var(--gap));
                width: calc(10% - var(--gap));
            }
        }

        &.columns-11 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(9.090% - var(--gap));
                width: calc(9.090% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(9.090% - var(--gap));
                width: calc(9.090% - var(--gap));
            }
        }

        &.columns-12 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(8.333% - var(--gap));
                width: calc(8.333% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(8.333% - var(--gap));
                width: calc(8.333% - var(--gap));
            }
        }

        &.columns-13 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(7.692% - var(--gap));
                width: calc(7.692% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(7.692% - var(--gap));
                width: calc(7.692% - var(--gap));
            }
        }

        &.columns-14 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(7.142% - var(--gap));
                width: calc(7.142% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(7.142% - var(--gap));
                width: calc(7.142% - var(--gap));
            }
        }

        &.columns-15 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(6.666% - var(--gap));
                width: calc(6.666% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(6.666% - var(--gap));
                width: calc(6.666% - var(--gap));
            }
        }

        &.columns-16 {
            .ph-ql-masonry-sizer {
                flex: 0 0 calc(6.25% - var(--gap));
                width: calc(6.25% - var(--gap));
            }
            li.wp-block-post {
                flex: 0 0 calc(6.25% - var(--gap));
                width: calc(6.25% - var(--gap));
            }
        }
    }
}