.devider {
    position: relative;
}

.devider .st1, .devider .st2 {
    isolation: isolate;
}

.devider .stroke {
    fill: none;
    mix-blend-mode: multiply;
    stroke-width: 6px;
}

.bg-beige .bg {
    fill: var(--color-beige)!important;
}
.bg-white .bg {
    fill: var(--color-white)!important;
}
.bg-orange .bg {
    fill: var(--color-orange)!important;
}
.bg-green .bg {
    fill: var(--color-green)!important;
}
.bg-blue .bg {
    fill: var(--color-blue)!important;
}
.bg-transparent .bg {
    fill: transparent!important;
}

.triangle-blue .fill {
    fill: var(--color-blue)!important;
}
.triangle-blue::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--color-blue);
    z-index: 2;
    top: inherit !important;
}
.triangle-green .fill {
    fill: var(--color-green)!important;
}
.triangle-green::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--color-green);
    z-index: 2;
    top: inherit !important;
}
.triangle-white .fill {
    fill: var(--color-white)!important;
}
.triangle-white::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--color-white);
    z-index: 2;
    top: inherit !important;
}
.triangle-beige .fill {
    fill: var(--color-beige)!important;
}
.triangle-beige::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--color-beige);
    z-index: 2;
    top: inherit !important;
}
.triangle-orange .fill {
    fill: var(--color-orange)!important;
}
.triangle-orange::before {
    content: "" !important;
    width: 100%;
    height: 4px;
    position: absolute !important;
    bottom: -2px !important;
    left: 0 !important;
    background: var(--color-orange);
    z-index: 2;
    top: inherit !important;
}

.stroke-blue .stroke {
    stroke: var(--color-blue)!important;
}
.stroke-green .stroke {
    stroke: var(--color-green)!important;
}
.stroke-beige .stroke {
    stroke: var(--color-beige)!important;
}
.stroke-orange .stroke {
    stroke: var(--color-orange)!important;
}


.mirror-horizontal {
    transform: scaleX(-1);
}
.mirror-vertical {
    transform: scaleY(-1);
}

.mirror {
    transform: scaleX(-1) scaleY(-1);
}
@media (min-width: 700px) {
    .devider .stroke {
        stroke-width: 4px;
    }
}

@media (min-width: 1024px) {
    .devider .stroke {
        stroke-width: 2px;
    }
}