:root {
    --c0: #000;
    --c1: #fff;
    --cz: transparent;
    --c1: #fff;

    --bw0: #000;
    --bw1: #111;
    --bw8: #888;
    --bwf: #fff;
    --clr-t: transparent;

    --h-225: hsla(225deg, 100%, 60%, 1);
    --h-315: hsla(315deg, 100%, 60%, 1);
    --h-045: hsla(45deg, 100%, 60%, 1);
    --h-135: hsla(135deg, 100%, 60%, 1);

    --h2-225: hsla(225deg, 100%, 60%, .5);
    --h2-315: hsla(315deg, 100%, 60%, .5);
    --h2-045: hsla(45deg, 100%, 60%, .5);
    --h2-135: hsla(135deg, 100%, 60%, .5);

    --hue-card-1: 225deg;
    --hue-card-2: 315deg;
    --hue-card-3: 045deg;
    --hue-card-4: 135deg;

    --h225: 225deg;
    --h315: 315deg;
    --h045: 045deg;
    --h135: 135deg;
    
}


[class|="nyCard"] {
    position: relative;
    height: 60px; width: 68px;
    margin: .5rem 1rem;
    outline: 1px dashed #fff8;
    outline-offset: 4px;
}
[class|="nyCard"]::after,
[class|="nyCard"]::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    top: 50%; left: 50%;
    transform-style: preserve-3d;
    height: 60px; width: 30px;
    transform: translateX(-50%) translateY(-50%);
    transform: translateX(4px) translateY(-50%);
}

.nysz-to-5x8 [class|="nyCard"] {
    --side-marging: .5em;
    --card-height: 4em;
    --card-width: 2.5em;
    height: var(--card-height); width: calc((var(--card-width) * 2) + var(--side-marging));
}
.nysz-to-5x8 [class|="nyCard"]::after,
.nysz-to-5x8 [class|="nyCard"]::before {
    width: 2.5em; height: 4em;
}
.nysz-to-5x8 [class|="nyCard"]::after {
    transform: translateX(-2.75em) translateY(-50%);
}

.nysz-to-2x2 [class|="nyCard"] {
    --side-marging: .5em;
    --card-height: 4em;
    --card-width: 4em;
    height: var(--card-height); width: calc((var(--card-width) * 2) + var(--side-marging));
}
.nysz-to-2x2 [class|="nyCard"]::after,
.nysz-to-2x2 [class|="nyCard"]::before {
    width: 4em; height: 4em;
}
.nysz-to-2x2 [class|="nyCard"]::after {
    transform: translateX(-4.25em) translateY(-50%);
}


/* back */
[class|="nyCard"]::after,
.nyCard-01::after {
    transform: translateX(-34px) translateY(-50%);
    --rect-clr: hsla(calc(var(--i) * 20), 100%, 1%, 1);
    --rect-brd: hsla(calc(var(--i) * 20), 100%, 50%, 1);

    --rect-pattern: hsla(calc(var(--i) * 20), 100%, 15%, 1);
    --rect-li1: hsla(calc(var(--i) * 20), 100%, 2%, .3);
    --rect-li2: hsla(calc(var(--i) * 20), 100%, 30%, .3);

    /* background-image: repeating-conic-gradient(#000 0deg 90deg, var(--rect-pattern) 90deg 180deg); */
    background-image: repeating-conic-gradient(var(--c0) 0deg 90deg, var(--c1) 90deg 180deg);
    background-image: 
    linear-gradient(135deg, var(--rect-li1), var(--rect-li2)),
    repeating-conic-gradient(var(--rect-brd) 0deg 90deg, var(--rect-pattern) 90deg 180deg);

    /* background-size: 100% 100%, 1rem 1rem; */
    box-shadow: 0 0 0rem 0.25rem var(--rect-clr), inset 0 0 0 0.0625rem var(--rect-brd);
    background-color: var(--rect-clr);
}
/* front */
.nyCard-01::before {
    --rect-clr: hsla(calc(var(--i) * 20), 100%, 60%, .1);
    --rect-brd: hsla(calc(var(--i) * 20), 100%, 60%, .5);

    --rect-li1: hsla(calc(var(--i) * 10), 100%, 10%, .5);
    --rect-li2: hsla(calc(var(--i) * 20), 100%, 30%, .5);
    --rect-li3: hsla(calc(var(--i) * 10), 100%, 50%, .5);
    --rect-li4: hsla(calc(var(--i) * 20), 100%, 80%, .5);
    --rect-clr2: hsla(calc(var(--i) * 20), 100%, 60%, .3);

    --rect-clr: hsla(calc(var(--i) * 20), 100%, 2%, 1);
    --rect-brd: hsla(calc(var(--i) * 20), 100%, 30%, 1);

    background-image: 
    linear-gradient(045deg, var(--h2-225) 10px, var(--cz) 10px),
    linear-gradient(135deg, var(--h2-315) 10px, var(--cz) 10px),
    linear-gradient(225deg, var(--h2-045) 10px, var(--cz) 10px),
    linear-gradient(315deg, var(--h2-135) 10px, var(--cz) 10px),

    linear-gradient(045deg, var(--c1) 20px, var(--cz) 20px),
    linear-gradient(135deg, var(--c1) 20px, var(--cz) 20px),
    linear-gradient(225deg, var(--c1) 20px, var(--cz) 20px),
    linear-gradient(315deg, var(--c1) 20px, var(--cz) 20px),

    linear-gradient(045deg, hsla(045deg, 100%, 80%, 1) 20px, hsla(045deg, 100%, 80%, 1) 22px, var(--cz) 24px),
    linear-gradient(135deg, hsla(135deg, 100%, 20%, 1) 20px, hsla(135deg, 100%, 20%, 1) 22px, var(--cz) 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 20%, 1) 20px, hsla(225deg, 100%, 20%, 1) 22px, var(--cz) 24px),
    linear-gradient(315deg, hsla(315deg, 100%, 80%, 1) 20px, hsla(315deg, 100%, 80%, 1) 22px, var(--cz) 24px),
    
    linear-gradient(045deg, hsla(045deg, 100%, 20%, 1) 25px, hsla(045deg, 100%, 20%, 1) 27px, var(--cz) 29px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, 1) 25px, hsla(135deg, 100%, 60%, 1) 27px, var(--cz) 29px),
    linear-gradient(225deg, hsla(225deg, 100%, 80%, 1) 25px, hsla(225deg, 100%, 80%, 1) 27px, var(--cz) 29px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, 1) 25px, hsla(315deg, 100%, 60%, 1) 27px, var(--cz) 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */    

    repeating-conic-gradient(
        var(--h-225) 0deg 90deg, 
        var(--h-315) 90deg 180deg, 
        var(--h-045) 180deg 270deg, 
        var(--h-135) 270deg 360deg),
    repeating-conic-gradient(
        var(--rect-li1) 0deg 90deg, 
        var(--rect-li2) 90deg 180deg, 
        var(--rect-li3) 180deg 270deg, 
        var(--rect-li4) 270deg 360deg),
    repeating-conic-gradient(var(--rect-brd) 0deg 90deg, var(--rect-clr) 90deg 180deg);
    color: #fff;

    /* background-size: 1rem 1rem, 1rem 1rem; */
    /* background-size: 1rem 1rem, 1rem 1rem, 1rem 1rem; */
    /* background-size: 100% 100%, 100% 100%, 1rem 1rem; */
    box-shadow: 0 0 0.5rem 0.25rem var(--rect-brd), inset 0 0 0 0.125rem var(--rect-brd);
    box-shadow: 0 0 0rem 0.25rem var(--rect-clr), inset 0 0 .5rem 0.25rem var(--rect-brd);
    box-shadow: 0 0 0rem 0.25rem var(--rect-clr), inset 0 0 0rem 0.125rem var(--rect-brd);
    background-color: var(--rect-clr);
}

/* [class|="nyCard"]::before {transform: translateX(.25rem) translateY(-50%);} */
/* front */
.nyCard-02::before {
    --c: #fc3;
    --c: #3f6;
    --c: #36f;
    --c: #f3c;

    background-image: 
    linear-gradient(045deg, hsla(045deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(225deg, hsla(225deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, .5) 10px, #fff0 10px),

    linear-gradient(45deg, #ffff 20px, #fff0 20px),
    linear-gradient(135deg, #ffff 20px, #fff0 20px),
    linear-gradient(225deg, #ffff 20px, #fff0 20px),
    linear-gradient(315deg, #ffff 20px, #fff0 20px),

    linear-gradient(045deg, #000 25px, #0000 25px),
    linear-gradient(135deg, #000 25px, #0000 25px),
    linear-gradient(225deg, #000 25px, #0000 25px),
    linear-gradient(315deg, #000 25px, #0000 25px),

    linear-gradient(045deg, #fff0 27px, #36f 27px, #36f 30px, #fff0 30px),
    linear-gradient(135deg, #fff0 27px, #f3c 27px, #f3c 30px, #fff0 30px),
    linear-gradient(225deg, #fff0 27px, #fc3 27px, #fc3 30px, #fff0 30px),
    linear-gradient(315deg, #fff0 27px, #3f6 27px, #3f6 30px, #fff0 30px),

    linear-gradient(045deg, hsla(045deg, 100%, 80%, 1) 20px, hsla(045deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(135deg, hsla(135deg, 100%, 20%, 1) 20px, hsla(135deg, 100%, 20%, 1) 22px, #fff0 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 20%, 1) 20px, hsla(225deg, 100%, 20%, 1) 22px, #fff0 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 80%, 1) 25px, hsla(225deg, 100%, 50%, 1) 27px, #fff0 29px),
    linear-gradient(315deg, hsla(315deg, 100%, 80%, 1) 20px, hsla(315deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, 1) 25px, hsla(315deg, 100%, 60%, 1) 27px, #fff0 29px),
    linear-gradient(045deg, hsla(045deg, 100%, 20%, 1) 25px, hsla(045deg, 100%, 20%, 1) 27px, #fff0 29px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, 1) 25px, hsla(135deg, 100%, 60%, 1) 27px, #fff0 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, 1) 0deg 90deg, 
        hsla(315deg, 100%, 60%, 1) 90deg 180deg, 
        hsla(45deg, 100%, 60%, 1) 180deg 270deg, 
        hsla(135deg, 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, #ffff , #fff0);

    box-shadow: 0 0 0rem 0.125rem #fff, inset 0 0 0rem 0.125rem #000;
}

.nyCard-03::before {
    background-image: 
    linear-gradient(045deg, hsla(045deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(225deg, hsla(225deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, .5) 10px, #fff0 10px),

    linear-gradient(45deg, #ffff 20px, #fff0 20px),
    linear-gradient(135deg, #ffff 20px, #fff0 20px),
    linear-gradient(225deg, #ffff 20px, #fff0 20px),
    linear-gradient(315deg, #ffff 20px, #fff0 20px),

    linear-gradient(045deg, #000 21px, #0000 21px),
    linear-gradient(135deg, #000 21px, #0000 21px),
    linear-gradient(225deg, #000 21px, #0000 21px),
    linear-gradient(315deg, #000 21px, #0000 21px),

    linear-gradient(045deg, hsla(045deg, 100%, 80%, .4) 20px, hsla(045deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(135deg, hsla(135deg, 100%, 20%, .4) 20px, hsla(135deg, 100%, 20%, 1) 22px, #fff0 24px),
    linear-gradient(315deg, hsla(315deg, 100%, 80%, .4) 20px, hsla(315deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 20%, .4) 20px, hsla(225deg, 100%, 20%, 1) 22px, #fff0 24px),

    linear-gradient(045deg, hsla(045deg, 100%, 20%, 1) 24px, hsla(045deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(135deg, hsla(135deg, 100%, 80%, 1) 24px, hsla(135deg, 100%, 80%, .4) 27px, #fff0 29px),
    linear-gradient(315deg, hsla(315deg, 100%, 20%, 1) 24px, hsla(315deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(225deg, hsla(225deg, 100%, 80%, 1) 24px, hsla(225deg, 100%, 80%, .4) 27px, #fff0 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, 1) 0deg 90deg, 
        hsla(315deg, 100%, 60%, 1) 90deg 180deg, 
        hsla(45deg, 100%, 60%, 1) 180deg 270deg, 
        hsla(135deg, 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, #ffff , #fff0);

    box-shadow: 0 0 0rem 0.125rem #fff, inset 0 0 0rem 0.125rem #000;
}

.nyCard-04::before {
    background-image: 
    linear-gradient(045deg, hsla(045deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(225deg, hsla(225deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, .5) 10px, #fff0 10px),

    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, .2) 0deg 90deg, 
        hsla(315deg, 100%, 60%, .2) 90deg 180deg, 
        hsla(045deg, 100%, 60%, .2) 180deg 270deg, 
        hsla(135deg, 100%, 60%, .2) 270deg 360deg),

    linear-gradient(45deg, #ffff 20px, #fff0 20px),
    linear-gradient(135deg, #ffff 20px, #fff0 20px),
    linear-gradient(225deg, #ffff 20px, #fff0 20px),
    linear-gradient(315deg, #ffff 20px, #fff0 20px),

    linear-gradient(045deg, #000 21px, #0000 21px),
    linear-gradient(135deg, #000 21px, #0000 21px),
    linear-gradient(225deg, #000 21px, #0000 21px),
    linear-gradient(315deg, #000 21px, #0000 21px),

    linear-gradient(045deg, hsla(045deg, 100%, 80%, .4) 20px, hsla(045deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(135deg, hsla(135deg, 100%, 20%, .4) 20px, hsla(135deg, 100%, 20%, 1) 22px, #fff0 24px),
    linear-gradient(315deg, hsla(315deg, 100%, 80%, .4) 20px, hsla(315deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 20%, .4) 20px, hsla(225deg, 100%, 20%, 1) 22px, #fff0 24px),

    linear-gradient(045deg, hsla(045deg, 100%, 20%, 1) 24px, hsla(045deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(135deg, hsla(135deg, 100%, 80%, 1) 24px, hsla(135deg, 100%, 80%, .4) 27px, #fff0 29px),
    linear-gradient(315deg, hsla(315deg, 100%, 20%, 1) 24px, hsla(315deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(225deg, hsla(225deg, 100%, 80%, 1) 24px, hsla(225deg, 100%, 80%, .4) 27px, #fff0 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, 1) 0deg 90deg, 
        hsla(315deg, 100%, 60%, 1) 90deg 180deg, 
        hsla(45deg, 100%, 60%, 1) 180deg 270deg, 
        hsla(135deg, 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, #ffff , #fff0);

    box-shadow: 0 0 0rem 0.125rem #fff, inset 0 0 0rem 0.125rem #000;
}

.nyCard-05::before {
    --c: #fc3;
    --c: #3f6;
    --c: #36f;
    --c: #f3c;

    background-image: 
    linear-gradient(045deg, hsla(045deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(225deg, hsla(225deg, 100%, 60%, .5) 10px, #fff0 10px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, .5) 10px, #fff0 10px),

    linear-gradient(045deg, #ffff 12px, #fff0 12px),
    linear-gradient(135deg, #ffff 12px, #fff0 12px),
    linear-gradient(225deg, #ffff 12px, #fff0 12px),
    linear-gradient(315deg, #ffff 12px, #fff0 12px),

    linear-gradient(045deg, hsla(045deg, 100%, 60%, 1) 14px, #fff0 14px),
    linear-gradient(135deg, hsla(135deg, 100%, 60%, 1) 14px, #fff0 14px),
    linear-gradient(225deg, hsla(225deg, 100%, 60%, 1) 14px, #fff0 14px),
    linear-gradient(315deg, hsla(315deg, 100%, 60%, 1) 14px, #fff0 14px),

    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, .2) 0deg 90deg, 
        hsla(315deg, 100%, 60%, .2) 90deg 180deg, 
        hsla(045deg, 100%, 60%, .2) 180deg 270deg, 
        hsla(135deg, 100%, 60%, .2) 270deg 360deg),

    linear-gradient(45deg, #ffff 20px, #fff0 20px),
    linear-gradient(135deg, #ffff 20px, #fff0 20px),
    linear-gradient(225deg, #ffff 20px, #fff0 20px),
    linear-gradient(315deg, #ffff 20px, #fff0 20px),

    linear-gradient(045deg, #000 21px, #0000 21px),
    linear-gradient(135deg, #000 21px, #0000 21px),
    linear-gradient(225deg, #000 21px, #0000 21px),
    linear-gradient(315deg, #000 21px, #0000 21px),

    linear-gradient(045deg, hsla(045deg, 100%, 80%, .4) 20px, hsla(045deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(135deg, hsla(135deg, 100%, 20%, .4) 20px, hsla(135deg, 100%, 20%, 1) 22px, #fff0 24px),
    linear-gradient(315deg, hsla(315deg, 100%, 80%, .4) 20px, hsla(315deg, 100%, 80%, 1) 22px, #fff0 24px),
    linear-gradient(225deg, hsla(225deg, 100%, 20%, .4) 20px, hsla(225deg, 100%, 20%, 1) 22px, #fff0 24px),

    linear-gradient(045deg, hsla(045deg, 100%, 20%, 1) 24px, hsla(045deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(135deg, hsla(135deg, 100%, 80%, 1) 24px, hsla(135deg, 100%, 80%, .4) 27px, #fff0 29px),
    linear-gradient(315deg, hsla(315deg, 100%, 20%, 1) 24px, hsla(315deg, 100%, 20%, .4) 27px, #fff0 29px),
    linear-gradient(225deg, hsla(225deg, 100%, 80%, 1) 24px, hsla(225deg, 100%, 80%, .4) 27px, #fff0 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(225deg, 100%, 60%, 1) 0deg 90deg, 
        hsla(315deg, 100%, 60%, 1) 90deg 180deg, 
        hsla(45deg, 100%, 60%, 1) 180deg 270deg, 
        hsla(135deg, 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, #ffff , #fff0);

    box-shadow: 0 0 0rem 0.125rem #fff, inset 0 0 0rem 0.125rem #000;
}

.nyCard-06::before {
    background-image: 
    linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) 10px, var(--clr-t) 10px),

    linear-gradient(045deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(135deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(225deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(315deg, var(--bwf) 12px, var(--clr-t) 12px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 60%, 1) 14px, var(--clr-t) 14px),

    repeating-conic-gradient(
        hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
        hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
        hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
        hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),

    linear-gradient(045deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(135deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(225deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(315deg, var(--bwf) 20px, var(--clr-t) 20px),

    linear-gradient(045deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(135deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(225deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(315deg, var(--bw0) 21px, var(--clr-t) 21px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 40%, .4) 20px, hsla(var(--h045), 100%, 40%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 20%, .4) 20px, hsla(var(--h135), 100%, 20%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 40%, .4) 20px, hsla(var(--h315), 100%, 40%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 20%, .4) 20px, hsla(var(--h225), 100%, 20%, 1) 22px, var(--clr-t) 24px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 20%, 1) 24px, hsla(var(--h045), 100%, 20%, .4) 27px, var(--clr-t) 29px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 40%, 1) 24px, hsla(var(--h135), 100%, 40%, .4) 27px, var(--clr-t) 29px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 20%, 1) 24px, hsla(var(--h315), 100%, 20%, .4) 27px, var(--clr-t) 29px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 40%, 1) 24px, hsla(var(--h225), 100%, 40%, .4) 27px, var(--clr-t) 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
        hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
        hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
        hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, var(--bwf) , #fff0);

    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem #000;
}

.nyCard-07::before {
    background-image: 
    linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) 10px, var(--clr-t) 10px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) 10px, var(--clr-t) 10px),

    linear-gradient(045deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(135deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(225deg, var(--bwf) 12px, var(--clr-t) 12px),
    linear-gradient(315deg, var(--bwf) 12px, var(--clr-t) 12px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 60%, 1) 14px, var(--clr-t) 14px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 60%, 1) 14px, var(--clr-t) 14px),

    repeating-conic-gradient(
        hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
        hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
        hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
        hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),

    linear-gradient(045deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(135deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(225deg, var(--bwf) 20px, var(--clr-t) 20px),
    linear-gradient(315deg, var(--bwf) 20px, var(--clr-t) 20px),

    linear-gradient(045deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(135deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(225deg, var(--bw0) 21px, var(--clr-t) 21px),
    linear-gradient(315deg, var(--bw0) 21px, var(--clr-t) 21px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 40%, 1) 20px, hsla(var(--h045), 100%, 40%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 20%, 1) 20px, hsla(var(--h135), 100%, 20%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 40%, 1) 20px, hsla(var(--h315), 100%, 40%, 1) 22px, var(--clr-t) 24px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 20%, 1) 20px, hsla(var(--h225), 100%, 20%, 1) 22px, var(--clr-t) 24px),

    linear-gradient(045deg, hsla(var(--h045), 100%, 20%, 1) 24px, hsla(var(--h045), 100%, 20%, 1) 27px, var(--clr-t) 29px),
    linear-gradient(135deg, hsla(var(--h135), 100%, 40%, 1) 24px, hsla(var(--h135), 100%, 40%, 1) 27px, var(--clr-t) 29px),
    linear-gradient(315deg, hsla(var(--h315), 100%, 20%, 1) 24px, hsla(var(--h315), 100%, 20%, 1) 27px, var(--clr-t) 29px),
    linear-gradient(225deg, hsla(var(--h225), 100%, 40%, 1) 24px, hsla(var(--h225), 100%, 40%, 1) 27px, var(--clr-t) 29px),
    
    /* radial-gradient(circle at 20% 20%, var(--rect-clr), var(--rect-clr2)), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #111), */
    /* radial-gradient(circle at 20% 20%, #fff, var(--rect-clr2), #fff), */
    repeating-conic-gradient(
        hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
        hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
        hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
        hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),

    repeating-conic-gradient(
        hsla(45deg, 100%, 60%, .8) 0deg 90deg, 
        hsla(135deg, 100%, 60%, .8) 90deg 180deg, 
        hsla(225deg, 100%, 60%, .8) 180deg 270deg, 
        hsla(315deg, 100%, 60%, .8) 270deg 360deg),
    linear-gradient(315deg, var(--bwf) , var(--clr-t));

    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.nyCard-08::before {
    background-image: 
        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) 10px, var(--clr-t) 10px),

        linear-gradient(045deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(135deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(225deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(315deg, var(--bwf) 12px, var(--clr-t) 12px),

        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, 1) 14px, var(--clr-t) 14px),

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),

        linear-gradient(45deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(135deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(225deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(315deg, var(--bwf) 20px, var(--clr-t) 20px),
        
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),
        linear-gradient(315deg, var(--bwf), var(--clr-t));

    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.nyCard-09::before {
    background-image: 
        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) 10px, var(--clr-t) 10px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) 10px, var(--clr-t) 10px),

        linear-gradient(045deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(135deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(225deg, var(--bwf) 12px, var(--clr-t) 12px),
        linear-gradient(315deg, var(--bwf) 12px, var(--clr-t) 12px),

        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, 1) 14px, var(--clr-t) 14px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, 1) 14px, var(--clr-t) 14px),

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),

        linear-gradient(045deg, hsla(var(--h045), 100%, 80%, .4) 20px, hsla(var(--h045), 100%, 80%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 20%, .4) 20px, hsla(var(--h135), 100%, 20%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 80%, .4) 20px, hsla(var(--h315), 100%, 80%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 20%, .4) 20px, hsla(var(--h225), 100%, 20%, 1) 22px, var(--clr-t) 24px),

        linear-gradient(045deg, hsla(var(--h045), 100%, 20%, 1) 24px, hsla(var(--h045), 100%, 20%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 80%, 1) 24px, hsla(var(--h135), 100%, 80%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 20%, 1) 24px, hsla(var(--h315), 100%, 20%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 80%, 1) 24px, hsla(var(--h225), 100%, 80%, .4) 27px, var(--clr-t) 29px),
        
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),
        linear-gradient(315deg, var(--bwf), var(--clr-t));

    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.nyCard-10::before {
    background: 
        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) .75em, var(--clr-t) .75em),

        linear-gradient(045deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(135deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(225deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(315deg, var(--bwf) 1em, var(--clr-t) 1em),

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg) center / 1em 1em no-repeat,
        repeating-conic-gradient(from 45deg,
            hsla(var(--hue-card-1), 100%, 20%, 1) -45deg 45deg, 
            hsla(var(--hue-card-2), 100%, 20%, 1) 45deg 135deg, 
            hsla(var(--hue-card-3), 100%, 20%, 1) 135deg 225deg, 
            hsla(var(--hue-card-4), 100%, 20%, 1) 225deg 315deg) center / 2em 2em no-repeat,

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),
        
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),
        linear-gradient(315deg, var(--bwf), var(--clr-t));
    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.nyCard-11::before {
    background: 
        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) .75em, var(--clr-t) .75em),

        linear-gradient(045deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(135deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(225deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(315deg, var(--bwf) 1em, var(--clr-t) 1em),

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg) center / 2em 1em no-repeat,
        repeating-conic-gradient(from 45deg,
            hsla(var(--hue-card-1), 100%, 20%, 1) -45deg 45deg, 
            hsla(var(--hue-card-2), 100%, 20%, 1) 45deg 135deg, 
            hsla(var(--hue-card-3), 100%, 20%, 1) 135deg 225deg, 
            hsla(var(--hue-card-4), 100%, 20%, 1) 225deg 315deg) center / 1em 4em no-repeat,

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),
        
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),
        linear-gradient(315deg, var(--bwf), var(--clr-t));
    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.nyCard-12::before {
    background: 
        linear-gradient(045deg, hsla(var(--h045), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(135deg, hsla(var(--h135), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(225deg, hsla(var(--h225), 100%, 60%, .5) .75em, var(--clr-t) .75em),
        linear-gradient(315deg, hsla(var(--h315), 100%, 60%, .5) .75em, var(--clr-t) .75em),

        linear-gradient(045deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(135deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(225deg, var(--bwf) 1em, var(--clr-t) 1em),
        linear-gradient(315deg, var(--bwf) 1em, var(--clr-t) 1em),

        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg) center / 6em 1em no-repeat,
        repeating-conic-gradient(from 45deg,
            hsla(var(--hue-card-1), 100%, 20%, 1) -45deg 45deg, 
            hsla(var(--hue-card-2), 100%, 20%, 1) 45deg 135deg, 
            hsla(var(--hue-card-3), 100%, 20%, 1) 135deg 225deg, 
            hsla(var(--hue-card-4), 100%, 20%, 1) 225deg 315deg) center / 1em 6em no-repeat,
                    
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, .2) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, .2) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, .2) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, .2) 270deg 360deg),

        linear-gradient(045deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(135deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(225deg, var(--bwf) 20px, var(--clr-t) 20px),
        linear-gradient(315deg, var(--bwf) 20px, var(--clr-t) 20px),

        linear-gradient(045deg, var(--bw0) 21px, var(--clr-t) 21px),
        linear-gradient(135deg, var(--bw0) 21px, var(--clr-t) 21px),
        linear-gradient(225deg, var(--bw0) 21px, var(--clr-t) 21px),
        linear-gradient(315deg, var(--bw0) 21px, var(--clr-t) 21px),

        linear-gradient(045deg, hsla(var(--h045), 100%, 40%, .4) 20px, hsla(var(--h045), 100%, 40%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 20%, .4) 20px, hsla(var(--h135), 100%, 20%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 40%, .4) 20px, hsla(var(--h315), 100%, 40%, 1) 22px, var(--clr-t) 24px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 20%, .4) 20px, hsla(var(--h225), 100%, 20%, 1) 22px, var(--clr-t) 24px),

        linear-gradient(045deg, hsla(var(--h045), 100%, 20%, 1) 24px, hsla(var(--h045), 100%, 20%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(135deg, hsla(var(--h135), 100%, 40%, 1) 24px, hsla(var(--h135), 100%, 40%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(315deg, hsla(var(--h315), 100%, 20%, 1) 24px, hsla(var(--h315), 100%, 20%, .4) 27px, var(--clr-t) 29px),
        linear-gradient(225deg, hsla(var(--h225), 100%, 40%, 1) 24px, hsla(var(--h225), 100%, 40%, .4) 27px, var(--clr-t) 29px),
        
        repeating-conic-gradient(
            hsla(var(--hue-card-1), 100%, 60%, 1) 0deg 90deg, 
            hsla(var(--hue-card-2), 100%, 60%, 1) 90deg 180deg, 
            hsla(var(--hue-card-3), 100%, 60%, 1) 180deg 270deg, 
            hsla(var(--hue-card-4), 100%, 60%, 1) 270deg 360deg),
        linear-gradient(315deg, var(--bwf), var(--clr-t));
    box-shadow: 0 0 0rem 0.125rem var(--bwf), inset 0 0 0rem 0.125rem var(--bw0);
}

.shelf {
    counter-reset: listCounter;
}
[class|="nyCard"] {
    counter-increment: listCounter;
}
.nysz-to-2x2 [class|="nyCard"]::after,
.nysz-to-5x8 [class|="nyCard"]::after,
[class|="nyCard"]::after {
    content: "[" counter(listCounter) "]";
    content: counter(listCounter);
    /* content: ''; */
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 1px #1119;
}