/******* Do not edit this file *******
Woody Code Snippets CSS and JS
Saved: Feb 08 2026 | 19:19:37 */
/* ---------- variables ---------- */
:root{
    --gap-ics:4px;          /* black divider width                    */
    --skew-ics:-10deg;      /* angle of the centre slice              */
    --indent-ics:8vw;       /* inward bite for outer slice clip-path  */
}

/* ---------- layout shell ---------- */
.tri-split-ics{
    display:flex;
    height:100vh;
    overflow:hidden;
}

/* ---------- generic slice ---------- */
.panel-ics{
    position:relative;
    flex:1 1 33.333%;
    transform:skewX(var(--skew-ics));              /* centre slice slope */
    overflow:hidden;
}

/* background image */
.panel-ics::before{
    content:'';
    position:absolute;
    inset:-8vw;                                     /* bleed to hide corners */
    background-size:cover;
    background-position:center;
    transform:skewX(calc(-1 * var(--skew-ics)));    /* cancels container skew */
}

/* default divider on the inner right edge */
.panel-ics::after{
    content:'';
    position:absolute;
    top:0;
    right:calc(-1 * var(--gap-ics));
    width:var(--gap-ics);
    height:100%;
    background:#000;
}

/* ---------- individual images ---------- */
.panel-left-ics::before{
    background-image:url(https://www.staging8.inventiva.global/wp-content/uploads/2025/04/Image1.png);
}
.panel-centre-ics::before{
    background-image:url(https://www.staging8.inventiva.global/wp-content/uploads/2025/04/Image2.png);
}
.panel-right-ics::before{
    background-image:url(https://www.staging8.inventiva.global/wp-content/uploads/2025/04/Image3.png);
}

/* ---------- LEFT slice: flush to viewport left, slanted on right ---------- */
.panel-left-ics{
    transform:none;                                  /* stop global skew    */
    clip-path:polygon(
        0 0,
        100% 0,
        calc(100% - var(--indent-ics)) 100%,
        0 100%
    );
}
.panel-left-ics::before{
    inset:0;
    transform:none;                                  /* image stands upright */
}
.panel-left-ics::after{                              /* divider stays slanted */
    transform:skewX(var(--skew-ics));
}

/* ---------- RIGHT slice: flush to viewport right, slanted on left ---------- */
.panel-right-ics{
    transform:none;
    clip-path:polygon(
        var(--indent-ics) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
.panel-right-ics::before{
    inset:0;
    transform:none;
}
.panel-right-ics::after{                             /* move divider to inner left */
    left:calc(-1 * var(--gap-ics));
    right:auto;
    transform:skewX(var(--skew-ics));
}

/* ---------- mobile fallback ---------- */
@media(max-width:900px){
    .panel-ics{
        flex:1 1 100%;
        transform:none;
        clip-path:none;
    }
    .panel-ics::before{
        inset:0;
        transform:none;
    }
    .panel-ics::after{display:none}
}