/* Block Styles */
.is-style-Normal span {
    mix-blend-mode: normal;
}
.is-style-Multiply span {
    mix-blend-mode: multiply;
}
.is-style-Screen span {
    mix-blend-mode: screen;
}
.is-style-Overlay span {
    mix-blend-mode: overlay;
}
.is-style-Darken span {
    mix-blend-mode: darken;
}
.is-style-Lighten span {
    mix-blend-mode: lighten;
}
.is-style-Color-Dodge span {
    mix-blend-mode: color-dodge;
}
.is-style-Color-Burn span {
    mix-blend-mode: color-burn;
}
.is-style-Hard-Light span {
    mix-blend-mode: hard-light;
}
.is-style-Soft-Light span {
    mix-blend-mode: soft-light;
}
.is-style-Difference span {
    mix-blend-mode: difference;
}
.is-style-Exclusion span {
    mix-blend-mode: exclusion;
}
.is-style-Hue span {
    mix-blend-mode: hue;
}
.is-style-Saturation span {
    mix-blend-mode: saturation;
}
.is-style-Color span {
    mix-blend-mode: color;
}
.is-style-Luminosity span {
    mix-blend-mode: luminosity;
}

/* If left align */
/* Skew het hele blok */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image {
    transform: skewX(-20deg);
}
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure::before {
    transform: skewX(-20deg);
}

/* Counter-skew de figure */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure {
    position: relative;
    transform: skewX(20deg);
}

/* Originele img onzichtbaar maar houdt de hoogte */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure > img {
    display: block;
    width: 100%;
    opacity: 0;
}

/* Stripe basisstijl */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(100% / 3);
    overflow: hidden;
}

/* Img binnen stripe vult de volledige originele afbeelding */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe img {
    position: absolute;
    left: 0;
    width: 100%;
    height: 300%; /* 3x de stripe hoogte = volledige afbeelding */
    object-fit: cover;
    opacity: 1;
}

/* Stripe 1 — bovenste derde */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(2) {
    top: 0;
    clip-path: polygon(0 0, 100% 0%, 89% 100%, 0% 100%);
}
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(2) img {
    top: 0; /* Toont bovenste deel */
}

/* Stripe 2 — middelste derde */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(3) {
    top: calc(110% / 3);
    clip-path: polygon(0 0, 88.5% 0%, 78% 100%, 0% 100%);
}
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(3) img {
    top: -105%; /* Verschuift de afbeelding 1 stripe omhoog */
}

/* Stripe 3 — onderste derde */
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(4) {
    top: calc(110% / 3 * 2);
    clip-path: polygon(0 0, 77.6% 0%, 68% 100%, 0% 100%);
}
.row .wp-block-madeit-block-content-column:first-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(4) img {
    top: -210%; /* Verschuift de afbeelding 2 stripes omhoog */
}

/* If right align */
/* Skew het hele blok */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image {
    transform: skewX(20deg);
}
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure::before {
    transform: skewX(20deg);
}

/* Counter-skew de figure */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure {
    position: relative;
    transform: skewX(-20deg);
}

/* Originele img onzichtbaar maar houdt de hoogte */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure > img {
    display: block;
    width: 100%;
    opacity: 0;
}

/* Stripe basisstijl */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe {
    position: absolute;
    left: 0;
    width: 100%;
    height: calc(110% / 3);
    overflow: hidden;
}

/* Img binnen stripe vult de volledige originele afbeelding */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe img {
    position: absolute;
    left: 0;
    width: 110%;
    height: 300%;
    object-fit: cover;
    opacity: 1;
}

/* Stripe 1 — bovenste derde */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(2) {
    top: 0;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 11% 100%);
}
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(2) img {
    top: 0;
}

/* Stripe 2 — middelste derde */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(3) {
    top: calc(120% / 3);
    clip-path: polygon(11.5% 0%, 100% 0%, 100% 100%, 23% 100%);
}
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(3) img {
    top: -105%;
}

/* Stripe 3 — onderste derde */
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(4) {
    top: calc(120% / 3 * 2);
    clip-path: polygon(23.5% 0%, 100% 0%, 100% 100%, 35% 100%);
}
.row .wp-block-madeit-block-content-column:last-child .is-style-Style1.wp-block-madeit-block-color-image figure .stripe:nth-child(4) img {
    top: -210%;
}

/* Skew stijl voor losse afbeeldingen — rechts */
.row .wp-block-madeit-block-content-column:last-child .wp-block-image.is-style-skew {
    transform: skewX(20deg);
    overflow: hidden;
}
.row .wp-block-madeit-block-content-column:last-child .wp-block-image.is-style-skew img {
    transform: skewX(-20deg);
    max-width: 120%;
}

/* Skew stijl voor losse afbeeldingen — links */
.row .wp-block-madeit-block-content-column:first-child .wp-block-image.is-style-skew {
    transform: skewX(-20deg);
    overflow: hidden;
}
.row .wp-block-madeit-block-content-column:first-child .wp-block-image.is-style-skew img {
    max-width: calc(100% + 180px);
    transform: translateX(-90px) skewX(20deg);
}