:root {
    /*
    --cgrid: 64;
    --gap: 16;
    */
    --cgrid: 56;
    --gap: 14;
    --cshift: 80;

    --ggap: 16;
    --gridX: 240;
    --gridY: 240;
    --ggrid: 64;
    --sgrid: 60;

    --x0: 0;
    --x1: 1;
    --x2: 2;
    --x3: 3;
    --x4: 0;
    --x5: 1;
    --x6: 2;
    --x7: 3;
    --x8: 0;
    --x9: 1;
    --x10: 2;
    --x11: 3;
    --x12: 0;
    --x13: 1;
    --x14: 2;
    --x15: 3;

    --y0: 0;
    --y1: 0;
    --y2: 0;
    --y3: 0;
    --y4: 1;
    --y5: 1;
    --y6: 1;
    --y7: 1;
    --y8: 2;
    --y9: 2;
    --y10: 2;
    --y11: 2;
    --y12: 3;
    --y13: 3;
    --y14: 3;
    --y15: 3;

}


/* 4 column */


@media screen and (min-width: 1420.2px), screen and (max-width: 1080px) and (min-width:1020.2px) {

    .grid #hl1,
    .grid #hl2,
    .grid #hl3,
    .grid #hl4,
    .grid #vl1,
    .grid #vl5,
    .grid #vl9,
    .grid #vl13 {
        opacity: 0;
    }

    .grid .projectGrid.all {
        height: 960px;
    }

    .grid .projectGrid.museum {
        height: 720px;
    }

    .grid .projectGrid.brand {
        height: 480px;
    }

    .grid .projectGrid.concept {
        height: 480px;
    }

    .grid .projectGrid.design {
        height: 720px;
    }

    .grid .projectGrid.code {
        height: 480px;
    }

    .grid .projectGrid {
        width: 960px;
    }
    .widTest {
        color: blue;
    }
    
}

/*

@media screen and (max-width: 1356px) {

    :root {
        --cgrid: 60;
        --gap: 15;
    }
}

@media screen and (max-width: 1300px) {



    :root {
        --cgrid: 56;
        --gap: 14;
    }
}
*/


@media screen and (max-width: 1244px) {

    :root {
        --cgrid: 52;
        --gap: 13;
    }
}

@media screen and (max-width: 1188px) {

    :root {
        --cgrid: 48;
        --gap: 12;
    }
}

@media screen and (max-width: 1132px) {

    :root {
        --cgrid: 44;
        --gap: 11;
    }
}

@media screen and (max-width: 1076px) {

    :root {
        --cgrid: 56;
        --gap: 14;
    }
}

@media screen and (max-width: 1020px) {

    :root {
        --cgrid: 56;
        --gap: 14;
    }



}

@media screen and (max-width: 920px) {

    :root {
        --cgrid: 56;
        --gap: 14;

    }
}


@media screen and (max-width: 844px) {

    :root {
        --cgrid: 52;
        --gap: 13;
    }
}

@media screen and (max-width: 788px) {

    :root {
        --cgrid: 48;
        --gap: 12;
    }
}

@media screen and (max-width: 732px) {

    :root {
        --cgrid: 44;
        --gap: 11;
    }
}

@media screen and (max-width: 676px) {

    :root {
        --cgrid: 40;
        --gap: 10;
    }
}

@media screen and (max-width: 620px) {

    :root {
        --cgrid: 36;
        --gap: 9;
    }
}

@media screen and (max-width: 564px) {

    :root {
        --cgrid: 32;
        --gap: 8;
    }
}

@media screen and (max-width: 508px) {

    :root {
        --cgrid: 28;
        --gap: 7;
    }
}

@media screen and (max-width: 452px) {

    :root {
        --cgrid: 24;
        --gap: 6;
    }
}

@media screen and (max-width: 396px) {

    :root {
        --cgrid: 20;
        --gap: 5;
    }
}



.cluster .projectGrid {
    height: calc(11px*var(--cgrid));
}


@media screen and (max-width: 1420px) and (min-width:1180.2px), screen and (max-width: 1020px) and (min-width:780.2px) {

    /* 3 column */

    :root {
        --cshift: 0;
        --x0: 0;
        --x1: 1;
        --x2: 2;
        --x3: 0;
        --x4: 1;
        --x5: 2;
        --x6: 0;
        --x7: 1;
        --x8: 2;
        --x9: 0;
        --x10: 1;
        --x11: 2;
        --x12: 0;
        --x13: 1;
        --x14: 2;
        --x15: 0;

        --y0: 0;
        --y1: 0;
        --y2: 0;
        --y3: 1;
        --y4: 1;
        --y5: 1;
        --y6: 2;
        --y7: 2;
        --y8: 2;
        --y9: 3;
        --y10: 3;
        --y11: 3;
        --y12: 4;
        --y13: 4;
        --y14: 4;
        --y15: 5;

    }

    .grid #hl1,
    .grid #hl2,
    .grid #hl3,
    .grid #vl1,
    .grid #vl4,
    .grid #vl7,
    .grid #vl10,
    .grid #vl13,
    .grid #vl16 {
        opacity: 0;
    }

    .grid .projectGrid.all {
        height: 1440px;
    }

    .grid .projectGrid.museum {
        height: 720px;
    }

    .grid .projectGrid.brand {
        height: 720px;
    }

    .grid .projectGrid.concept {
        height: 720px;
    }

    .grid .projectGrid.design {
        height: 720px;
    }

    .grid .projectGrid.code {
        height: 720px;
    }

    .grid .projectGrid {
        width: 720px;
    }

    .widTest {
        color: green;
    }


}


@media screen and (max-width: 780px), screen and (max-width: 1180px) and (min-width:1080.2px) {

    /* 2 column */


    :root {

        --cshift: 0;

        --x0: 0;
        --x1: 1;
        --x2: 0;
        --x3: 1;
        --x4: 0;
        --x5: 1;
        --x6: 0;
        --x7: 1;
        --x8: 0;
        --x9: 1;
        --x10: 0;
        --x11: 1;
        --x12: 0;
        --x13: 1;
        --x14: 0;
        --x15: 1;

        --y0: 0;
        --y1: 0;
        --y2: 1;
        --y3: 1;
        --y4: 2;
        --y5: 2;
        --y6: 3;
        --y7: 3;
        --y8: 4;
        --y9: 4;
        --y10: 5;
        --y11: 5;
        --y12: 6;
        --y13: 6;
        --y14: 7;
        --y15: 7;

    }

    .grid #hl1,
    .grid #hl2,
    .grid #vl1,
    .grid #vl3,
    .grid #vl5,
    .grid #vl7,
    .grid #vl9,
    .grid #vl11,
    .grid #vl13,
    .grid #vl15 {
        opacity: 0;
    }

    .grid #hl3,
    .grid #vl4,
    .grid .all #vl10,
    .grid #vl16 {
        opacity: 1;
    }


    .grid .projectGrid.all {
        height: calc(8px*var(--gridY));
    }

    .grid .projectGrid.brand,
    .grid .projectGrid.concept,
    .grid .projectGrid.code {
        height: calc(4px*var(--gridY));
    }

    .grid .projectGrid.museum,
    .grid .projectGrid.design {
        height: calc(5px*var(--gridY));
    }

    .grid .projectGrid {
        width: calc(2px*var(--gridX));
    }

    .widTest {
        color: red;
    }

}

@media screen and (max-width: 540px) {
    :root {
        --gridX: 200;
        --gridY: 200;
        --ggap: 13.33;

    }

    .grid .gridCell {
        transform-origin: top left;
        transition: transform 1s;
        transform: scale(.8333);
    }


    
}

@media screen and (max-width: 460px) {
    :root {
        --gridX: 180;
        --gridY: 180;
        --ggap: 12;
    }

    .grid .gridCell {
        transform-origin: top left;
        transition: transform 1s;
        transform: scale(.75);
    }

}

@media screen and (max-width: 420px) {
    :root {
        --gridX: 160;
        --gridY: 160;
        --ggap: 10.667;
    }

    .grid .gridCell {
        transform-origin: top left;
        transition: transform 1s;
        transform: scale(.6667);
    }



}



/* basics */

.iconic {
    position: absolute;
    transition: left 1s, top 1s, width 1s, transform 1s, height 1s, opacity 1s, visibility 1s;
    pointer-events: none;
}

.iconic a {
    pointer-events: auto;
}

.iconic .img {
    transition: left 1s, top 1s, width 1s, transform 1s, height 1s, opacity 1s, visibility 1s;
}

.gridCell {
    transition: left 1s, top 1s, width 1s, transform 1s, height 1s, opacity 1s, visibility 1s;
}

.vLiner {
    position: absolute;
    background-color: black;
    width: 1px;
    transition: left 1s, top 1s, width 1s, height 1s, transform 1s, opacity 1s;
    box-sizing: border-box;
    padding-top: calc(1px*var(--gap));
    padding-bottom: calc(1px*var(--gap));
    background-clip: content-box;
}


.lineX {
    position: absolute;
    width: 1px;
    transition: left 1s, top 1s, width 1s, height 1s, transform 1s, opacity 1s;
}

.lineY {
    position: absolute;
    height: 1px;
    transition: left 1s, top 1s, width 1s, height 1s, transform 1s, opacity 1s;
}

.hLiner {
    position: absolute;
    background-color: black;
    height: 1px;
    transition: left 1s, top 1s, width 1s, height 1s, transform 1s, opacity 1s;
    box-sizing: border-box;
    padding-left: calc(1px*var(--gap));
    padding-right: calc(1px*var(--gap));
    background-clip: content-box;
}

.grid .vLiner {
    height: calc(1px*var(--gridY));
    padding-top: calc(1px*var(--ggap));
    padding-bottom: calc(1px*var(--ggap));
}

.grid .hLiner {
    width: calc(1px*var(--gridX));
    padding-left: calc(1px*var(--ggap));
    padding-right: calc(1px*var(--ggap));
}

.cluster .hoverLabel {
    padding: calc(1px*var(--gap));
    padding-bottom:  calc(1px*(var(--gap)));
    background-clip: content-box;
    box-sizing:border-box;
}

/* pj sizes */



.cluster .tall,
.cluster .tall .hoverLabel,
.cluster .tall img {
    width: calc(2px *var(--cgrid));
    height: calc(4px *var(--cgrid));
}

.cluster .wide,
.cluster .wide .hoverLabel,
.cluster .wide img {
    width: calc(4px *var(--cgrid));
    height: calc(2px *var(--cgrid));
}

.cluster .square,
.cluster .square .hoverLabel,
.cluster .square img {
    width: calc(3px *var(--cgrid));
    height: calc(3px *var(--cgrid));
}

.cluster .projectGrid {
    width: calc(14px * var(--cgrid) + 1px * var(--cshift));
    height: calc(13px * var(--cgrid));
}

/* cluster positions */

.cluster .all .ax0,
.cluster .museum .mx0,
.cluster .brand .bx0,
.cluster .concept .cx0,
.cluster .design .dx0,
.cluster .code .tx0 {
    transform: translateX(calc(0px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax1,
.cluster .museum .mx1,
.cluster .brand .bx1,
.cluster .concept .cx1,
.cluster .design .dx1,
.cluster .code .tx1 {
    transform: translateX(calc(1px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax2,
.cluster .museum .mx2,
.cluster .brand .bx2,
.cluster .concept .cx2,
.cluster .design .dx2,
.cluster .code .tx2 {
    transform: translateX(calc(2px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax3,
.cluster .museum .mx3,
.cluster .brand .bx3,
.cluster .concept .cx3,
.cluster .design .dx3,
.cluster .code .tx3 {
    transform: translateX(calc(3px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax4,
.cluster .museum .mx4,
.cluster .brand .bx4,
.cluster .concept .cx4,
.cluster .design .dx4,
.cluster .code .tx4 {
    transform: translateX(calc(4px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax5,
.cluster .museum .mx5,
.cluster .brand .bx5,
.cluster .concept .cx5,
.cluster .design .dx5,
.cluster .code .tx5 {
    transform: translateX(calc(5px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax6,
.cluster .museum .mx6,
.cluster .brand .bx6,
.cluster .concept .cx6,
.cluster .design .dx6,
.cluster .code .tx6 {
    transform: translateX(calc(6px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax7,
.cluster .museum .mx7,
.cluster .brand .bx7,
.cluster .concept .cx7,
.cluster .design .dx7,
.cluster .code .tx7 {
    transform: translateX(calc(7px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax8,
.cluster .museum .mx8,
.cluster .brand .bx8,
.cluster .concept .cx8,
.cluster .design .dx8,
.cluster .code .tx8 {
    transform: translateX(calc(8px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax9,
.cluster .museum .mx9,
.cluster .brand .bx9,
.cluster .concept .cx9,
.cluster .design .dx9,
.cluster .code .tx9 {
    transform: translateX(calc(9px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax10,
.cluster .museum .mx10,
.cluster .brand .bx10,
.cluster .concept .cx10,
.cluster .design .dx10,
.cluster .code .tx10 {
    transform: translateX(calc(10px * var(--cgrid) + 1px * var(--cshift)));
}

.cluster .all .ax11,
.cluster .museum .mx11,
.cluster .brand .bx11,
.cluster .concept .cx11,
.cluster .design .dx11,
.cluster .code .tx11 {
    transform: translateX(calc(11px * var(--cgrid) + 1px * var(--cshift)));
}
.cluster .all .ax12,
.cluster .museum .mx12,
.cluster .brand .bx12,
.cluster .concept .cx12,
.cluster .design .dx12,
.cluster .code .tx12 {
    transform: translateX(calc(12px * var(--cgrid) + 1px * var(--cshift)));
}


.cluster .all .ay0,
.cluster .museum .my0,
.cluster .brand .by0,
.cluster .concept .cy0,
.cluster .design .dy0,
.cluster .code .ty0 {
    transform: translateY(calc(0px*var(--cgrid)));
}

.cluster .all .ay1,
.cluster .museum .my1,
.cluster .brand .by1,
.cluster .concept .cy1,
.cluster .design .dy1,
.cluster .code .ty1 {
    transform: translateY(calc(1px*var(--cgrid)));
}

.cluster .all .ay2,
.cluster .museum .my2,
.cluster .brand .by2,
.cluster .concept .cy2,
.cluster .design .dy2,
.cluster .code .ty2 {
    transform: translateY(calc(2px*var(--cgrid)));
}

.cluster .all .ay3,
.cluster .museum .my3,
.cluster .brand .by3,
.cluster .concept .cy3,
.cluster .design .dy3,
.cluster .code .ty3 {
    transform: translateY(calc(3px*var(--cgrid)));
}

.cluster .all .ay4,
.cluster .museum .my4,
.cluster .brand .by4,
.cluster .concept .cy4,
.cluster .design .dy4,
.cluster .code .ty4 {
    transform: translateY(calc(4px*var(--cgrid)));
}

.cluster .all .ay5,
.cluster .museum .my5,
.cluster .brand .by5,
.cluster .concept .cy5,
.cluster .design .dy5,
.cluster .code .ty5 {
    transform: translateY(calc(5px*var(--cgrid)));
}

.cluster .all .ay6,
.cluster .museum .my6,
.cluster .brand .by6,
.cluster .concept .cy6,
.cluster .design .dy6,
.cluster .code .ty6 {
    transform: translateY(calc(6px*var(--cgrid)));
}

.cluster .all .ay7,
.cluster .museum .my7,
.cluster .brand .by7,
.cluster .concept .cy7,
.cluster .design .dy7,
.cluster .code .ty7 {
    transform: translateY(calc(7px*var(--cgrid)));
}

.cluster .all .ay8,
.cluster .museum .my8,
.cluster .brand .by8,
.cluster .concept .cy8,
.cluster .design .dy8,
.cluster .code .ty8 {
    transform: translateY(calc(8px*var(--cgrid)));
}

.cluster .all .ay9,
.cluster .museum .my9,
.cluster .brand .by9,
.cluster .concept .cy9,
.cluster .design .dy9,
.cluster .code .ty9 {
    transform: translateY(calc(9px*var(--cgrid)));
}

.cluster .all .ay10,
.cluster .museum .my10,
.cluster .brand .by10,
.cluster .concept .cy10,
.cluster .design .dy10,
.cluster .code .ty10 {
    transform: translateY(calc(10px*var(--cgrid)));
}

.cluster .all .ay11,
.cluster .museum .my11,
.cluster .brand .by11,
.cluster .concept .cy11,
.cluster .design .dy11,
.cluster .code .ty11 {
    transform: translateY(calc(11px*var(--cgrid)));
}

.iconic a {
    transition: opacity 1s, visibility 1s;
}

.museum .mx,
.brand .bx,
.concept .cx,
.design .dx,
.code .tx,
.museum .iconic.mx a,
.brand .iconic.bx a,
.concept .iconic.cx a,
.design .iconic.dx a,
.code .iconic.tx a {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}



.grid .all .axg,
.grid .museum .mxg,
.grid .brand .bxg,
.grid .concept .cxg,
.grid .design .dxg,
.grid .code .txg {
    opacity: 0;
    pointer-events: none;
    cursor: default;
}


.cluster .all .aw0,
.cluster .museum .mw0,
.cluster .brand .bw0,
.cluster .concept .cw0,
.cluster .design .dw0,
.cluster .code .tw0 {
    width: calc(0px*var(--cgrid));
}

.cluster .all .aw1,
.cluster .museum .mw1,
.cluster .brand .bw1,
.cluster .concept .cw1,
.cluster .design .dw1,
.cluster .code .tw1 {
    width: calc(1px*var(--cgrid));
}

.cluster .all .aw2,
.cluster .museum .mw2,
.cluster .brand .bw2,
.cluster .concept .cw2,
.cluster .design .dw2,
.cluster .code .tw2 {
    width: calc(2px*var(--cgrid));
}

.cluster .all .aw3,
.cluster .museum .mw3,
.cluster .brand .bw3,
.cluster .concept .cw3,
.cluster .design .dw3,
.cluster .code .tw3 {
    width: calc(3px*var(--cgrid));
}

.cluster .all .aw4,
.cluster .museum .mw4,
.cluster .brand .bw4,
.cluster .concept .cw4,
.cluster .design .dw4,
.cluster .code .tw4 {
    width: calc(4px*var(--cgrid));
}

.cluster .all .aw5,
.cluster .museum .mw5,
.cluster .brand .bw5,
.cluster .concept .cw5,
.cluster .design .dw5,
.cluster .code .tw5 {
    width: calc(5px*var(--cgrid));
}

.cluster .all .ah0,
.cluster .museum .mh0,
.cluster .brand .bh0,
.cluster .concept .ch0,
.cluster .design .dh0,
.cluster .code .th0 {
    height: calc(0px*var(--cgrid));
}

.cluster .all .ah1,
.cluster .museum .mh1,
.cluster .brand .bh1,
.cluster .concept .ch1,
.cluster .design .dh1,
.cluster .code .th1 {
    height: calc(1px*var(--cgrid));
}

.cluster .all .ah2,
.cluster .museum .mh2,
.cluster .brand .bh2,
.cluster .concept .ch2,
.cluster .design .dh2,
.cluster .code .th2 {
    height: calc(2px*var(--cgrid));
}

.cluster .all .ah3,
.cluster .museum .mh3,
.cluster .brand .bh3,
.cluster .concept .ch3,
.cluster .design .dh3,
.cluster .code .th3 {
    height: calc(3px*var(--cgrid));
}

.cluster .all .ah4,
.cluster .museum .mh4,
.cluster .brand .bh4,
.cluster .concept .ch4,
.cluster .design .dh4,
.cluster .code .th4 {
    height: calc(4px*var(--cgrid));
}

.cluster .all .ah5,
.cluster .museum .mh5,
.cluster .brand .bh5,
.cluster .concept .ch5,
.cluster .design .dh5,
.cluster .code .th5 {
    height: calc(5px*var(--cgrid));
}


.cluster .all .ah6,
.cluster .museum .mh6,
.cluster .brand .bh6,
.cluster .concept .ch6,
.cluster .design .dh6,
.cluster .code .th6 {
    height: calc(6px*var(--cgrid));
}

.cluster .all .axc,
.cluster .museum .mxc,
.cluster .brand .bxc,
.cluster .concept .cxc,
.cluster .design .dxc,
.cluster .code .txc
{
    opacity: 0;
    pointer-events: none;
    cursor: default;
    width:1px;
    height:1px;
}




/*
-------------------------------------------------
GRID SECTION
-------------------------------------------------
*/



.grid .square img {
    width: calc(3px *var(--sgrid));
    height: calc(3px *var(--sgrid));
    transform: translateX(calc(1px * 32 * 60 / var(--sgrid)));
}

.grid .wide img {
    width: calc(4px *var(--sgrid));
    height: calc(2px *var(--sgrid));
    transform: translateY(calc(1px * 34 * 60 / var(--sgrid)));
}

.grid .tall img {
    width: calc(2px *var(--sgrid));
    height: calc(4px *var(--sgrid));
}

.cluster .pTitle {
    font-size:20px;
    font-size:calc(.3px *var(--cgrid));
    line-height:calc(.3px *var(--cgrid));
    padding-left:calc(.125px *var(--cgrid));
    padding-right:calc(.125px *var(--cgrid));
}
.cluster .pBlurb {
    font-size:15px;
    font-size:calc(.2px *var(--cgrid));
    padding-bottom:10px;
    padding-top:5px;
    padding-left:calc(.125px *var(--cgrid));
    padding-right:calc(.125px *var(--cgrid));

}


/*

.cluster .pBlurb,
.cluster .pTitle {
    display: none;
}

.cluster .tall a {
    position:absolute;
    width: calc(2px *var(--cgrid));
    height: calc(4px *var(--cgrid));
}

.cluster .wide a {
    position:absolute;
    width: calc(4px *var(--cgrid));
    height: calc(2px *var(--cgrid));
}

.cluster .square a {
    position:absolute;
    width: calc(3px *var(--cgrid));
    height: calc(3px *var(--cgrid));
}

*/







/* grid positions */

.grid .gg0,
.grid .all .ag0,
.grid .museum .mg0,
.grid .brand .bg0,
.grid .concept .cg0,
.grid .design .dg0,
.grid .code .tg0 {
    transform: translate3d(calc(1px*var(--x0)*var(--gridX)), calc(1px*var(--y0)*var(--gridY)), 0);
}

.grid .gg1,
.grid .all .ag1,
.grid .museum .mg1,
.grid .brand .bg1,
.grid .concept .cg1,
.grid .design .dg1,
.grid .code .tg1 {
    transform: translate3d(calc(1px*var(--x1)*var(--gridX)), calc(1px*var(--y1)*var(--gridY)), 0);
}

.grid .gg2,
.grid .all .ag2,
.grid .museum .mg2,
.grid .brand .bg2,
.grid .concept .cg2,
.grid .design .dg2,
.grid .code .tg2 {
    transform: translate3d(calc(1px*var(--x2)*var(--gridX)), calc(1px*var(--y2)*var(--gridY)), 0);
}

.grid .gg3,
.grid .all .ag3,
.grid .museum .mg3,
.grid .brand .bg3,
.grid .concept .cg3,
.grid .design .dg3,
.grid .code .tg3 {
    transform: translate3d(calc(1px*var(--x3)*var(--gridX)), calc(1px*var(--y3)*var(--gridY)), 0);
}

.grid .gg4,
.grid .all .ag4,
.grid .museum .mg4,
.grid .brand .bg4,
.grid .concept .cg4,
.grid .design .dg4,
.grid .code .tg4 {
    transform: translate3d(calc(1px*var(--x4)*var(--gridX)), calc(1px*var(--y4)*var(--gridY)), 0);
}

.grid .gg5,
.grid .all .ag5,
.grid .museum .mg5,
.grid .brand .bg5,
.grid .concept .cg5,
.grid .design .dg5,
.grid .code .tg5 {
    transform: translate3d(calc(1px*var(--x5)*var(--gridX)), calc(1px*var(--y5)*var(--gridY)), 0);
}

.grid .gg6,
.grid .all .ag6,
.grid .museum .mg6,
.grid .brand .bg6,
.grid .concept .cg6,
.grid .design .dg6,
.grid .code .tg6 {
    transform: translate3d(calc(1px*var(--x6)*var(--gridX)), calc(1px*var(--y6)*var(--gridY)), 0);
}

.grid .gg7,
.grid .all .ag7,
.grid .museum .mg7,
.grid .brand .bg7,
.grid .concept .cg7,
.grid .design .dg7,
.grid .code .tg7 {
    transform: translate3d(calc(1px*var(--x7)*var(--gridX)), calc(1px*var(--y7)*var(--gridY)), 0);
}

.cluster .ccg8,
.grid .gg8,
.grid .all .ag8,
.grid .museum .mg8,
.grid .brand .bg8,
.grid .concept .cg8,
.grid .design .dg8,
.grid .code .tg8 {
    transform: translate3d(calc(1px*var(--x8)*var(--gridX)), calc(1px*var(--y8)*var(--gridY)), 0);
}

.cluster .ccg9,
.grid .gg9,
.grid .all .ag9,
.grid .museum .mg9,
.grid .brand .bg9,
.grid .concept .cg9,
.grid .design .dg9,
.grid .code .tg9 {
    transform: translate3d(calc(1px*var(--x9)*var(--gridX)), calc(1px*var(--y9)*var(--gridY)), 0);
}

.cluster .ccg10,
.grid .gg10,
.grid .all .ag10,
.grid .museum .mg10,
.grid .brand .bg10,
.grid .concept .cg10,
.grid .design .dg10,
.grid .code .tg10 {
    transform: translate3d(calc(1px*var(--x10)*var(--gridX)), calc(1px*var(--y10)*var(--gridY)), 0);
}

.cluster .ccg11,
.grid .gg11,
.grid .all .ag11,
.grid .museum .mg11,
.grid .brand .bg11,
.grid .concept .cg11,
.grid .design .dg11,
.grid .code .tg11 {
    transform: translate3d(calc(1px*var(--x11)*var(--gridX)), calc(1px*var(--y11)*var(--gridY)), 0);
}

.cluster .ccg12,
.grid .gg12,
.grid .all .ag12,
.grid .museum .mg12,
.grid .brand .bg12,
.grid .concept .cg12,
.grid .design .dg12,
.grid .code .tg12 {
    transform: translate3d(calc(1px*var(--x12)*var(--gridX)), calc(1px*var(--y12)*var(--gridY)), 0);
}

.cluster .ccg13,
.grid .gg13,
.grid .all .ag13,
.grid .museum .mg13,
.grid .brand .bg13,
.grid .concept .cg13,
.grid .design .dg13,
.grid .code .tg13 {
    transform: translate3d(calc(1px*var(--x13)*var(--gridX)), calc(1px*var(--y13)*var(--gridY)), 0);
}

.cluster .ccg14,
.grid .gg14,
.grid .all .ag14,
.grid .museum .mg14,
.grid .brand .bg14,
.grid .concept .cg14,
.grid .design .dg14,
.grid .code .tg14 {
    transform: translate3d(calc(1px*var(--x14)*var(--gridX)), calc(1px*var(--y14)*var(--gridY)), 0);
}

.cluster .ccg15,
.grid .gg15,
.grid .all .ag15,
.grid .museum .mg15,
.grid .brand .bg15,
.grid .concept .cg15,
.grid .design .dg15,
.grid .code .tg15 {
    transform: translate3d(calc(1px*var(--x15)*var(--gridX)), calc(1px*var(--y15)*var(--gridY)), 0);
}