/*********************************************
 * General
**********************************************/
.twc-image-content {
    --ic-width-content:550px;
    --ic-ratio:536/340;
    --ic-size-red-shape:60px;
    --ic-size-orange-shape:71px;
}
.twc-image-content__content {max-width:var(--ic-width-content);}
.twc-image-content__image {aspect-ratio:var(--ic-ratio);}

/* Option 1 image */
.has-1-image .twc-image-content__image {position:relative;}
.has-1-image .twc-image-content__image:before, .has-1-image .twc-image-content__image:after {
    content:""; display:block; position:absolute;
}

@media only screen and (min-width:769px) {
    /* Image position */
    .twc-image-content__col {width:50%;}
    .image-right-pos .twc-image-content__inner {flex-direction:row-reverse;}

    /* Content */
    .image-left-pos .twc-image-content__col.content {padding-left:var(--twc-gap-container);}
    .image-left-pos .twc-image-content__content {margin-left:auto;}
    .image-right-pos .twc-image-content__col.content {padding-right:var(--twc-gap-container);}
}
@media only screen and (max-width:768px) {
    .twc-image-content {--ic-width-content:100%;}
    .twc-image-content__inner {flex-direction:column-reverse;}
    .twc-image-content__col {width:100%;}
    .twc-image-content__col.content {margin-bottom:35px;}
    .twc-image-content__col.image {max-width:500px; margin-left:auto; margin-right:auto;}
    .twc-image-content__content br {display:none;}
}

/*********************************************
 * Style default
**********************************************/
/* Option square image */
.default-style.square-image {--ic-ratio:1/1;}

/* Option vertical image */
.default-style.vertical-image {--ic-ratio:464/595;}

@media only screen and (min-width:769px) {
    /* Option horizontal image */
    .default-style.horizontal-image .twc-image-content__col.content {width:55%;}
    .default-style.horizontal-image .twc-image-content__col.image {width:45%;}

    /* Option square image */
    .default-style.vertical-image {--ic-width-content:600px;}
    .default-style.square-image .twc-image-content__col.content,
    .default-style.vertical-image .twc-image-content__col.content {width:61%;}
    .default-style.square-image .twc-image-content__col.image,
    .default-style.vertical-image .twc-image-content__col.image {width:39%;}

    /* Option square image */
    .default-style.square-image {--ic-width-content:600px;}
}


/*********************************************
 * Style has shape
**********************************************/
/* General */
.has-red-shape, .has-orange-shape {--ic-ratio:42/34;}
.shape-left-pos .twc-image-content__image:before {left:0;}
.shape-right-pos .twc-image-content__image:before {right:0;}

/* Option has red shape */
.has-red-shape .twc-image-content__image:before {
    width:var(--ic-size-red-shape); height:var(--ic-size-red-shape);
    background:var(--twc-color-primary); top:0;
}
.has-red-shape.shape-left-pos .twc-image-content__image {padding:var(--ic-size-red-shape) 0 0 var(--ic-size-red-shape);}
.has-red-shape.shape-right-pos .twc-image-content__image {padding:var(--ic-size-red-shape) var(--ic-size-red-shape) 0 0;}

/* Option has orange shape */
.has-orange-shape .twc-image-content__image:before {
    width:var(--ic-size-orange-shape); height:var(--ic-size-orange-shape);
    background:var(--twc-color-secondary); bottom:0;
}
.has-orange-shape.shape-left-pos .twc-image-content__image {padding:0 0 var(--ic-size-orange-shape) var(--ic-size-orange-shape);}
.has-orange-shape.shape-right-pos .twc-image-content__image {padding:0 var(--ic-size-orange-shape) var(--ic-size-orange-shape) 0;}

@media only screen and (min-width:769px) {
    .has-red-shape {--ic-width-content:640px;}
    .has-red-shape .twc-image-content__col.image,
    .has-orange-shape .twc-image-content__col.image {width:40%;}
    .has-red-shape .twc-image-content__col.content,
    .has-orange-shape .twc-image-content__col.content {width:60%;}
}
@media only screen and (max-width:1024px) {
    .has-red-shape {--ic-size-red-shape:40px;}
    .has-orange-shape {--ic-size-orange-shape:50px}
}

/*********************************************
 * Option has 3 image
**********************************************/
.has-3-images {
    --ic-redunndant:var(--twc-gap-side);
    --ic-size-red-shape:123px;
    --ic-size-orange-shape:60px;
}
.has-3-images .twc-image-content__image-wrapper {position:relative; aspect-ratio:658/740;}
.has-3-images .twc-image-content__image-wrapper:before,
.has-3-images .twc-image-content__image-wrapper:after {content:""; display:block; position:absolute;}
.has-3-images .twc-image-content__image-wrapper:before {
    width:var(--ic-size-red-shape); height:var(--ic-size-red-shape); background:var(--twc-color-primary);
    top:0; left:0;
}
.has-3-images .twc-image-content__image-wrapper:after {
    width:var(--ic-size-orange-shape); height:var(--ic-size-orange-shape); background:var(--twc-color-secondary);
    bottom:0; left:var(--ic-size-red-shape);
}
.has-3-images .twc-image-content__image {position:absolute; aspect-ratio:unset;}
.has-3-images .image-1 {
    top:var(--ic-size-red-shape); left:var(--ic-size-red-shape);
    width:51.5%; height:41%;
}
.has-3-images .image-2 {
    top:calc(var(--ic-size-red-shape) + 41%); left:0;
    bottom:var(--ic-size-orange-shape); right:calc(100% - var(--ic-size-red-shape));
}
.has-3-images .image-3 {
    top:calc(var(--ic-size-red-shape) + 41%); right:0;
    bottom:calc(var(--ic-size-orange-shape) + 15px); left:calc(51.5% + var(--ic-size-red-shape));
}

@media only screen and (min-width:769px) {
    .has-3-images {--ic-width-content:535px;}
    .has-3-images.image-left-pos {margin-left:calc(-1 * var(--ic-redunndant));}
    .has-3-images.image-right-pos {margin-right:calc(-1 * var(--ic-redunndant));}
    .has-3-images .twc-image-content__col.content {padding-bottom:var(--ic-size-orange-shape);}
    .has-3-images .twc-image-content__inner {align-items:flex-end;}
}
@media only screen and (min-width:1800px) {
    .has-3-images {
        --ic-redunndant:230px;
        --ic-size-red-shape:142px;
        --ic-size-orange-shape:70px;
    }
    .twc-image-content.has-3-images .twc-image-content__col.content {width:46.7%;}
    .twc-image-content.has-3-images .twc-image-content__col.image {width:53.3%;}
    .has-3-images .twc-image-content__col.content {padding-bottom:0;}
    .has-3-images .twc-image-content__inner {align-items:center;}
}
@media only screen and (max-width:1180px) {
    .has-3-images {
        --ic-size-red-shape:100px;
        --ic-size-orange-shape:50px;
    }
}
@media only screen and (max-width:1024px) {
    .has-3-images {
        --ic-size-red-shape:80px;
    }
}
@media only screen and (max-width:768px) {
    .has-3-images {
        --ic-size-red-shape:78px;
        --ic-size-orange-shape:38px;
        --twc-spacing-40:var(--twc-spacing-default);
    }
}
@media only screen and (max-width:480px) {
    .twc-image-content.has-3-images .twc-image-content__col.image {width:calc(100% + 40px); margin-left:-20px; margin-right:-20px;}
}