/*************************************************************************

    ██████╗ ██████╗  ██████╗      ██╗███████╗ ██████╗████████╗███████╗
    ██╔══██╗██╔══██╗██╔═══██╗     ██║██╔════╝██╔════╝╚══██╔══╝██╔════╝
    ██████╔╝██████╔╝██║   ██║     ██║█████╗  ██║        ██║   ███████╗
    ██╔═══╝ ██╔══██╗██║   ██║██   ██║██╔══╝  ██║        ██║   ╚════██║
    ██║     ██║  ██║╚██████╔╝╚█████╔╝███████╗╚██████╗   ██║   ███████║
    ╚═╝     ╚═╝  ╚═╝ ╚═════╝  ╚════╝ ╚══════╝ ╚═════╝   ╚═╝   ╚══════╝

 ************************************************************************/




.projects-grid {
}

    .laptop .projects-grid {
        --grid-gap: calc(var( --ks-main-space-M )*1.0);

        position: relative;
        width: 100%;
        column-gap: var(--grid-gap);
    }
    
        .desktop .projects-grid {
            --grid-gap: calc(var( --ks-main-space-M )*1.5);
        }

        .projects-grid .projects-grid__item {
        }

            html:not( .laptop, .desktop, .large, .xlarge ) .projects-grid .projects-grid__item:is( :nth-child( 2n+1 ) ) {
                padding-right: var(--nvm-length-small);
            }

            html:not( .laptop, .desktop, .large, .xlarge ) .projects-grid .projects-grid__item:is( :nth-child( 2n ) ) {
                padding-left: var(--nvm-length-small);
            }

            html:not( .tablet, .laptop, .desktop, .large, .xlarge ) .projects-grid .projects-grid__item:is( :nth-child( 2n+1 ) ) {
                padding-right: var(--nvm-length-medium);
            }

            html:not( .tablet, .laptop, .desktop, .large, .xlarge ) .projects-grid .projects-grid__item:is( :nth-child( 2n ) ) {
                padding-left: var(--nvm-length-medium);
            }

            .laptop .projects-grid .projects-grid__item {
                position: relative;
                box-sizing: border-box;
            }

            .laptop .projects-grid .projects-grid__item.one {
                max-width: calc(33.33% - calc((2/3) * var(--grid-gap)));
            }

                .laptop .projects-grid .projects-grid__item.one .project-box .project-box__image .image-box {
                    aspect-ratio: 1/1;
                }

            .laptop .projects-grid .projects-grid__item.two {
                max-width: calc(37.33% - calc((2/3) * var(--grid-gap)));
            }

                .laptop .projects-grid .projects-grid__item.two .project-box .project-box__image .image-box {
                    aspect-ratio: 4/3;
                }

            .laptop .projects-grid .projects-grid__item.three {
                max-width: calc(29.33% - calc((2/3) * var(--grid-gap)));
            }

                .laptop .projects-grid .projects-grid__item.three .project-box .project-box__image .image-box {
                    aspect-ratio: 4/5;
                }

            .laptop .projects-grid .projects-grid__item.four {
                max-width: calc(37.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -4%;
            }

                .laptop .projects-grid .projects-grid__item.four .project-box .project-box__image .image-box {
                    aspect-ratio: 20/21;
                }

            .laptop .projects-grid .projects-grid__item.five {
                max-width: calc(29.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -8.55%;
            }

                .laptop .projects-grid .projects-grid__item.five .project-box .project-box__image .image-box {
                    aspect-ratio: 9/16;
                }

            .laptop .projects-grid .projects-grid__item.six {
                max-width: calc(33.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -1.4%;
            }

                .laptop .projects-grid .projects-grid__item.six .project-box .project-box__image .image-box {
                    aspect-ratio: 6/9;
                }

            .laptop .projects-grid .projects-grid__item.seven {
                max-width: calc(29.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -13.4%;
            }

                .laptop .projects-grid .projects-grid__item.seven .project-box .project-box__image .image-box {
                    aspect-ratio: 9/16;
                }

            .laptop .projects-grid .projects-grid__item.eight {
                max-width: calc(33.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -7.4%;
            }

                .laptop .projects-grid .projects-grid__item.eight .project-box .project-box__image .image-box {
                    aspect-ratio: 20/21;
                }

            .laptop .projects-grid .projects-grid__item.nine {
                max-width: calc(37.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -1.4%;
            }

                .laptop .projects-grid .projects-grid__item.nine .project-box .project-box__image .image-box {
                    aspect-ratio: 4/3;
                }

            .laptop .projects-grid .projects-grid__item.ten {
                max-width: calc(33.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -1.4%;
            }

                .laptop .projects-grid .projects-grid__item.ten .project-box .project-box__image .image-box {
                    aspect-ratio: 20/21;
                }

            .laptop .projects-grid .projects-grid__item.eleven {
                max-width: calc(37.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -10.4%;
            }

                .laptop .projects-grid .projects-grid__item.eleven .project-box .project-box__image .image-box {
                    aspect-ratio: 20/21;
                }

            .laptop .projects-grid .projects-grid__item.twelve {
                max-width: calc(29.33% - calc((2/3) * var(--grid-gap)));
                margin-top: -10.4%;
            }

                .laptop .projects-grid .projects-grid__item.twelve .project-box .project-box__image .image-box {
                    aspect-ratio: 6/10;
                }



/* Trim footer top margin. */
html:has( .work-page ) .main-footer,
html:has( .project-archive ) .main-footer,
html:has( .project_category ) .main-footer {
    margin-top: 0;
    padding-top: 0;
}

/* Make "Projects grid ( .content-main and .panel-width-wide )" full bleed. */
html:has( .work-page ) .content-main,
html:has( .work-page ) .content-main > .panel-width-wide,
html:has( .project-archive ) .content-main,
html:has( .project-archive ) .content-main > .panel-width-wide,
html:has( .project_category ) .content-main,
html:has( .project_category ) .content-main > .panel-width-wide {
    max-width: 100%;
}