:root {
    --polygon: 32px;
    --mask-tilt: polygon(var(--polygon) 0%, 100% 0%, calc(100% - var(--polygon)) 100%, 0% 100%);
    --mask-tilt-right: polygon(0 0, 100% 0%, calc(100% - var(--polygon)) 100%, 0% 100%);
    --mask-tilt-left: polygon(0 0, 100% 0%, 100% 100%, var(--polygon) 100%);
    --mask-tilt-bottom:polygon(0 0, 100% 0, 100% calc(100% - var(--polygon)), 0% 100%);
    --mask-tilt-top:polygon(0 0, 100% var(--polygon), 100% 100%, 0% 100%);
    --mask-tilt-invert: polygon(0 0, calc(100% - var(--polygon)) 0, 100% 100%, var(--polygon) 100%);
    --mask-tilt-invert-right: polygon(0 0, calc(100% - var(--polygon)) 0, 100% 100%, 0 100%);
    --mask-tilt-invert-left: polygon(var(--polygon) 0, 100% 0, 100% 100%, 0 100%);
    --mask-tilt-invert-bottom:polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--polygon)));
    --mask-tilt-invert-top:polygon(0 var(--polygon), 100% 0, 100% 100%, 0% 100%);
    --mask-arrow: polygon(var(--polygon) 0, calc(100% - var(--polygon)) 0%, 100% 50%, calc(100% - var(--polygon)) 100%, var(--polygon) 100%, 0% 50%);
    --mask-arrow-invert: polygon(100% 0, calc(100% - var(--polygon)) 50%, 100% 100%, 0 100%, var(--polygon) 50%, 0 0);;
    --mask-arrow-right: polygon(0 0, calc(100% - var(--polygon)) 0%, 100% 50%, calc(100% - var(--polygon)) 100%, 0 100%, 0% 50%);
    --mask-arrow-invert-right: polygon(0 0, 100% 0, calc(100% - var(--polygon)) 50%, 100% 100%, 0 100%, 0% 50%);
    --mask-arrow-left: polygon(var(--polygon) 0, 100% 0, 100% 100%, var(--polygon) 100%, 0 50%);
    --mask-arrow-invert-left: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--polygon) 50%);
    --mask-arrow-top: polygon(50% 0%, 100% 25px, 100% 100%, 0 100%, 0 var(--polygon));
    --mask-arrow-invert-top: polygon(50% var(--polygon), 100% 0, 100% 100%, 0 100%, 0 0);
    --mask-arrow-bottom: polygon(100% 0, 100% calc(100% - var(--polygon)), 50% 100%, 0% calc(100% - var(--polygon)), 0 0);
    --mask-arrow-invert-bottom: polygon(100% 0, 100% 100%, 50% calc(100% - var(--polygon)), 0 100%, 0 0);
    --mask-bubble1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='80.167 24.5 144.652 112.563' enable-background='new 80.167 24.5 144.652 112.563' xml:space='preserve'%3E%3Cpath fill='%23FF0066' d='M214.129,47.021c12.8,16.9,12.6,43.5,2.899,60.701c-9.7,17.1-29,24.8-44.7,27.7 c-15.6,2.8-27.8,0.899-44.1-2.9s-36.7-9.5-44.1-23.4c-7.3-13.8-1.5-35.9,11.6-52.9c13-16.9,33.2-28.7,56.401-31 C175.229,22.921,201.229,30.121,214.129,47.021z'/%3E%3C/svg%3E");
    --mask-bubble2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='61.834 9 174.896 174.7' enable-background='new 61.834 9 174.896 174.7' xml:space='preserve'%3E%3Cpath fill='%23FF0066' d='M194.005,17.05c14.4,6.8,26.301,19.1,33.4,33.5c7,14.4,9.1,31,8.2,47c-0.8,16.1-4.601,31.6-11.601,46 c-7.1,14.4-17.399,27.7-30.899,34.1c-13.4,6.4-30.101,5.9-45.7,4.101c-15.6-1.7-30.2-4.8-43-11.601c-12.8-6.8-23.8-17.3-31.3-29.899 c-7.5-12.7-11.6-27.4-10-41.3c1.5-13.9,8.7-26.9,15.6-40.5c7-13.6,13.7-28,24.9-36.5c11.3-8.5,27-11.2,43.2-12 C163.105,9.25,179.705,10.35,194.005,17.05z'/%3E%3C/svg%3E");
    --mask-bubble3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='86.888 28.608 142.007 116.507' enable-background='new 86.888 28.608 142.007 116.507' xml:space='preserve'%3E%3Cpath fill='%23FF0066' d='M198.8,43.5c13.9,9.9,24,25.9,28.101,43.8c4.1,17.8,2.199,37.601-8.7,47.8c-11,10.301-31,11.101-45.9,9.2 c-14.899-2-24.6-6.7-38.9-7.899c-14.3-1.2-33.3,1.1-41.3-6.2c-7.9-7.2-5-24-3-42C91,70.3,92,51.1,102,40.5 c9.9-10.6,29-12.6,47.2-11.7C167.5,29.7,185,33.6,198.8,43.5z'/%3E%3C/svg%3E%0A");
    --mask-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z'/%3E%3C/svg%3E");
}

.mask {
    clip-path: var(--mask-path, 0);
    border-radius: var(--mask-radius, 0);
    -webkit-mask-image: var(--mask-image);
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center center;
}
.mask:not(img) {
    padding: var(--mask-padding);
}

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

/* Circle */
.mask[class$="--circle"] {
    --mask-radius: 300px;
}

.mask[class*="--circle"][class$="left"] {
    --mask-radius: 300px 0 0 300px;
}
.mask[class*="--circle"][class$="right"] {
    --mask-radius: 0 300px 300px 0;
}


@media screen and (min-width: 821px) {
    /* Circle */
    .dual__item--full:first-child .mask[class$="--circle"]{
        padding-left: var(--padding-h);
    }
    .dual__item--full:last-child  .mask[class$="--circle"]{
        padding-right: var(--padding-h);
    }
}

@media screen and (max-width: 820px) {
    /* Circle */
    .dual__item--full .mask[class$="--circle"]{
        padding-right: var(--padding-h);
        padding-left: var(--padding-h);
    }
    .dual__item--full .mask[class*="--circle"][class$="left"] {
        padding-left: var(--padding-h);
    }
    .dual__item--full .mask[class*="--circle"][class$="right"] {
       padding-right: var(--padding-h);
    }
}


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

/* Tilt */
.mask[class$="--tilt"] {
    --mask-path: var(--mask-tilt);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--tilt"][class$="left"] {
    --mask-path: var(--mask-tilt-left);
    --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--tilt"][class$="right"] {
    --mask-path: var(--mask-tilt-right);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
}

.mask[class*="--tilt"][class$="top"] {
    --mask-path: var(--mask-tilt-top);
    --mask-padding:calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
}

.mask[class*="--tilt"][class$="bottom"] {
    --mask-path: var(--mask-tilt-bottom);
    --mask-padding: var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner);
}



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

/* Tilt invert*/
.mask[class$="--tilt-invert"] {
    --mask-path: var(--mask-tilt-invert);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--tilt-invert"][class$="left"] {
    --mask-path: var(--mask-tilt-invert-left);
    --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--tilt-invert"][class$="right"] {
    --mask-path: var(--mask-tilt-invert-right);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
}

.mask[class*="--tilt-invert"][class$="top"] {
    --mask-path: var(--mask-tilt-invert-top);
    --mask-padding:calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
}

.mask[class*="--tilt-invert"][class$="bottom"] {
    --mask-path: var(--mask-tilt-invert-bottom);
    --mask-padding: var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner);
}

@media screen and (min-width: 821px) {
    /* Tilt */
    .dual__item:first-child .dual__inner.mask[class$="--tilt"],
    .dual__item:first-child .dual__inner img.mask[class$="--tilt"] {
        --mask-path: var(--mask-tilt-right);
        --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
    }
    .dual__item:last-child .dual__inner.mask[class$="--tilt"],
    .dual__item:last-child .dual__inner img.mask[class$="--tilt"] {
        --mask-path: var(--mask-tilt-left);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }

    /* Tilt invert*/
    .dual__item:first-child .dual__inner.mask[class$="--tilt-invert"],
    .dual__item:first-child .dual__inner img.mask[class$="--tilt-invert"] {
        --mask-path: var(--mask-tilt-invert-right);
        --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
    }
    .dual__item:last-child .dual__inner.mask[class$="--tilt-invert"],
    .dual__item:last-child .dual__inner img.mask[class$="--tilt-invert"] {
        --mask-path: var(--mask-tilt-invert-left);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
}

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

    /* Tilt */
    .dual__item[data-order-mv="1"] .dual__inner.mask[class$="--tilt"],
    .dual__item[data-order-mv="1"] .dual__inner img.mask[class$="--tilt"] {
        --mask-path: var(--mask-tilt-bottom);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
    .dual__item[data-order-mv="2"] .dual__inner.mask[class$="--tilt"],
    .dual__item[data-order-mv="2"] .dual__inner img.mask[class$="--tilt"] {
        --mask-path: var(--mask-tilt-top);
        --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
    }

    /* Tilt invert*/
    .dual__item[data-order-mv="1"] .dual__inner.mask[class$="--tilt-invert"],
    .dual__item[data-order-mv="1"] .dual__inner img.mask[class$="--tilt-invert"]{
        clip-path: var(--mask-tilt-invert-bottom);object-fit, pues lko
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
    .dual__item[data-order-mv="2"] .dual__inner.mask[class$="--tilt-invert"],
    .dual__item[data-order-mv="2"] .dual__inner img.mask[class$="--tilt-invert"]{
        clip-path: var(--mask-tilt-invert-top);
        --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
    }
}
/***********/

/* Arrow */
.mask[class$="--arrow"] {
    --mask-path: var(--mask-arrow);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}
.mask[class*="--arrow"][class$="left"] {
    --mask-path: var(--mask-arrow-left);
    --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}
.mask[class*="--arrow"][class$="right"] {
    --mask-path: var(--mask-arrow-right);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
}

.mask[class*="--arrow"][class$="top"] {
    --mask-path: var(--mask-arrow-top);
    --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
}
.mask[class*="--arrow"][class$="bottom"] {
    --mask-path: var(--mask-arrow-bottom);
    --mask-padding: var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner);
}

.mask[class$="arrow-invert"] {
    --mask-path: var(--mask-arrow-invert);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--arrow-invert"][class$="left"] {
    --mask-path: var(--mask-arrow-invert-left);
    --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
}

.mask[class*="--arrow-invert"][class$="right"] {
    --mask-path: var(--mask-arrow-invert-right);
    --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
}
.mask[class*="--arrow-invert"][class$="top"] {
    --mask-path: var(--mask-arrow-top);
    --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
}
.mask[class*="--arrow-invert"][class$="bottom"] {
    --mask-path: var(--mask-arrow-bottom);
    --mask-padding: var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner);
}


@media screen and (min-width: 821px) {
    /* Arrow */
    .dual__item:first-child .dual__inner.mask[class$="--arrow"],
    .dual__item:first-child .dual__inner img.mask[class$="--arrow"] {
        --mask-path: var(--mask-arrow-right);
        --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
    }
    .dual__item:last-child .dual__inner.mask[class$="--arrow"],
    .dual__item:last-child .dual__inner img.mask[class$="--arrow"] {
        --mask-path: var(--mask-arrow-left);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }

    /* Arrow invert*/
    .dual__item:first-child .dual__inner.mask[class$="--arrow-invert"],
    .dual__item:first-child .dual__inner img.mask[class$="--arrow-invert"] {
        --mask-path: var(--mask-arrow-invert-right);
        --mask-padding: var(--padding-inner) calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner);
    }
    .dual__item:last-child .dual__inner.mask[class$="--arrow-invert"],
    .dual__item:last-child .dual__inner img.mask[class$="--arrow-invert"] {
        --mask-path: var(--mask-arrow-invert-left);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
}

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

    /* Arrow */
    .dual__item[data-order-mv="1"] .dual__inner.mask[class$="--arrow"],
    .dual__item[data-order-mv="1"] .dual__inner img.mask[class$="--arrow"] {
        --mask-path: var(--mask-arrow-bottom);
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
    .dual__item[data-order-mv="2"] .dual__inner.mask[class$="--arrow"],
    .dual__item[data-order-mv="2"] .dual__inner img.mask[class$="--arrow"] {
        --mask-path: var(--mask-arrow-top);
        --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
    }

    /* Arrow invert*/
    .dual__item[data-order-mv="1"] .dual__inner.mask[class$="--arrow-invert"],
    .dual__item[data-order-mv="1"] .dual__inner img.mask[class$="--arrow-invert"]{
        clip-path: var(--mask-arrow-invert-bottom);object-fit, pues lko
        --mask-padding: var(--padding-inner) var(--padding-inner) var(--padding-inner) calc(var(--padding-inner) + var(--polygon));
    }
    .dual__item[data-order-mv="2"] .dual__inner.mask[class$="--arrow-invert"],
    .dual__item[data-order-mv="2"] .dual__inner img.mask[class$="--arrow-invert"]{
        clip-path: var(--mask-arrow-invert-top);
        --mask-padding: calc(var(--padding-inner) + var(--polygon)) var(--padding-inner) var(--padding-inner) var(--padding-inner);
    }
}

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

/* Curve */

.mask[class$="--curve"] {
    --mask-radius: 8% 8% 8% 8% / 50% 50% 50% 50%;
    --mask-padding: var(--padding-inner);
}

.mask[class*="--curve"][class$="left"] {
    --mask-radius: 8% 0% 0% 8% / 50% 50% 50% 50%;
    --mask-padding: var(--padding-inner);
}
.mask[class*="--curve"][class$="right"] {
    --mask-radius: 0% 8% 8% 0% / 50% 50% 50% 50%;
    --mask-padding: var(--padding-inner);
}

.mask[class*="--curve"][class$="bottom"] {
    --mask-radius: 0% 0% 50% 50% / 100% 100% 8% 8%;
    --mask-padding: var(--padding-inner);
}
.mask[class*="--curve"][class$="top"] {
    --mask-radius: 50% 50% 0% 0% / 8% 8% 0% 0%;
    --mask-padding: var(--padding-inner);
}

@media screen and (min-width: 821px) {
    /* Curve */
    .dual__item:first-child .dual__inner.mask[class$="--curve"],
    .dual__item:first-child .dual__inner img.mask[class$="--curve"] {
    --mask-radius: 0% 8% 8% 0% / 50% 50% 50% 50%;
    --mask-padding: var(--padding-inner);
    }
    .dual__item:last-child .dual__inner.mask[class$="--curve"],
    .dual__item:last-child .dual__inner img.mask[class$="--curve"] {
    --mask-radius: 8% 0% 0% 8% / 50% 50% 50% 50%;
    --mask-padding: var(--padding-inner);
    }


}

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

    /* Curve */
    .dual__item[data-order-mv="1"] .dual__inner.mask[class$="--curve"],
    .dual__item[data-order-mv="1"] .dual__inner img.mask[class$="--curve"] {
    --mask-radius: 0% 0% 50% 50% / 100% 100% 8% 8%;
    --mask-padding: var(--padding-inner);
    }
    .dual__item[data-order-mv="2"] .dual__inner.mask[class$="--curve"],
    .dual__item[data-order-mv="2"] .dual__inner img.mask[class$="--curve"] {
    --mask-radius: 50% 50% 0% 0% / 8% 8% 0% 0%;
    --mask-padding: var(--padding-inner);
    }

}

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


/* Bubble1 */
.mask[class$="--bubble1"] {
    --mask-image: var(--mask-bubble1);
    min-height: 260px;
}

/* Bubble2 */
.mask[class$="--bubble2"] {
    --mask-image: var(--mask-bubble2);
    min-height: 260px;
}

/* Bubble3 */
.mask[class$="--bubble3"] {
    --mask-image: var(--mask-bubble3);
    min-height: 260px;
}

/* Bubble4 */
.mask[class$="--bubble4"] {
    --mask-radius: 30% 70% 71% 29% / 30% 30% 70% 70%;
    min-height: 260px;
}

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

/* Star */
.mask[class$="--star"] {
    --mask-image: var(--mask-star);
    aspect-ratio: 1;
    --mask-padding: 40% 33.333% 33.333% 33.333%;
}

.mask[class$="--star"] > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
}