.bgpattern_rectangle {
    --s: 194px; /* control the size*/
    /*--c1: #f6edb3;*/
    /*--c2: #acc4a3;*/
    /*--c3: #55897c;*/
    --c1: #ffffff;
    --c2: #e5e5e5;
    --c3: #f3f3f3;
    --_l:#0000 calc(25%/3),var(--c1) 0 25%,#0000 0;
    --_g:conic-gradient(from 120deg at 50% 87.5%,var(--c1) 120deg,#0000 0);
    background:
            var(--_g),var(--_g) 0 calc(var(--s)/2),
            conic-gradient(from 180deg at 75%,var(--c2) 60deg,#0000 0),
            conic-gradient(from 60deg at 75% 75%,var(--c1) 0 60deg,#0000 0),
            linear-gradient(150deg,var(--_l)) 0 calc(var(--s)/2),
            conic-gradient(at 25% 25%,#0000 50%,var(--c2) 0 240deg,var(--c1) 0 300deg,var(--c2) 0),
            linear-gradient(-150deg,var(--_l)) var(--c3);
    background-size: calc(0.866*var(--s)) var(--s);
}


    .bgpattern{
        --pattern-size: 5vmin;
        /*--pattern-color1: #FBFAE6;*/
        /*--pattern-color2: #639B76;*/
        /*--pattern-color3: #ED5256;*/
        --pattern-color1: #FBFAE6;
        --pattern-color2: #fff;
        --pattern-color3: #3385722b;
    }
    }
    .bgpattern_triangles{
        background-color: var(--pattern-color1);
        background-image: repeating-conic-gradient(
                from 30deg,
                var(--pattern-color2) 0 60deg,
                transparent 0 120deg,
                var(--pattern-color3) 0 180deg,
                transparent 0 240deg
        );
        background-size: var(--pattern-size) calc((var(--pattern-size) * 1.732));
    }
    .bgpattern_stripes{
        --pattern-angle: 135deg;
        background-color: var(--pattern-color1);
        background-image: repeating-linear-gradient(
                var(--pattern-angle),
                #fff 0 calc(var(--pattern-size) / 3),
                var(--pattern-color2) 0 calc(var(--pattern-size) / 1.5),
                var(--pattern-color3) 0 var(--pattern-size)
        );
    }
    .bgpattern_chequered{
        --pattern-angle: 0deg;
        background-color: var(--pattern-color1);
        background-image:
                repeating-linear-gradient(
                        calc(90deg - var(--pattern-angle) * -1),
                        transparent 0 calc(var(--pattern-size) / 2),
                        var(--pattern-color3) 0 var(--pattern-size)
                ),
                repeating-linear-gradient(
                        var(--pattern-angle),
                        transparent 0 calc(var(--pattern-size) / 2),
                        var(--pattern-color2) 0 var(--pattern-size)
                );
        background-blend-mode: multiply;
    }
    .bgpattern_dots{
        --pattern-dot-size: 12.5%;
        background-color: var(--pattern-color1);
        background-image:
                radial-gradient(
                        at 25% 25%,
                        var(--pattern-color2) 0 var(--pattern-dot-size),
                        transparent 0
                ),
                radial-gradient(
                        at 75% 75%,
                        var(--pattern-color3) 0 var(--pattern-dot-size),
                        transparent 0
                );
        background-size: var(--pattern-size)  var(--pattern-size)
    }
    .bgpattern_zigzag{
        background-color: var(--pattern-color1);
        background-image:
                linear-gradient(135deg, var(--pattern-color3) 25%, transparent 0),
                linear-gradient(225deg, var(--pattern-color2) 25%, transparent 0),
                linear-gradient(315deg, var(--pattern-color3) 25%, transparent 0),
                linear-gradient(45deg, var(--pattern-color2) 25%, transparent 0);
        background-position:
                calc(var(--pattern-size) / -2) 0,
                calc(var(--pattern-size) / -2) 0,
                0 0, 0 0;
        background-size: var(--pattern-size) var(--pattern-size);

    }