/*********************************************
 * Image with Content
**********************************************/
.twc-image-content {
    --ic-spacing:90px;
    --ic-spacing-fullwidth:85px;
}

@media only screen and (min-width:769px) {
    /* Style default */
    .twc-image-content__col.image {width:40%;}
    .twc-image-content__col.content {width:60%; padding-left:var(--ic-spacing);}
    .twc-image-content__image {padding-top:83%;}

    /* Style full width */
    .twc-image-content[class*="style-"] {--ic-spacing:140px;}
    .twc-image-content[class*="style-"] .twc-image-content__col.content {width:52.5%;}
    .twc-image-content[class*="style-"] .twc-image-content__col.image {width:47.5%;}
    .twc-image-content[class*="style-"] .twc-image-content__image {padding-top:70%;}

    /* Style left */
    .style-left {padding-right:calc(var(--twc-gap-side) + var(--ic-spacing-fullwidth));}

    /* Style right */
    .style-right {padding-left:calc(var(--twc-gap-side) + var(--ic-spacing-fullwidth));}
    .style-right .twc-image-content__inner {flex-direction:row-reverse;}
    .style-right .twc-image-content__col.content {padding:0 var(--ic-spacing) 0 0;}
}


/*********************************************
 * Image with Content Responsive
**********************************************/
@media only screen and (max-width:1439px) {
    .twc-image-content {
        --ic-spacing:60px;
        --ic-spacing-fullwidth:60px;
    }

    /* Style full width */
    .twc-image-content[class*="style-"] {--ic-spacing:80px;}
}

@media only screen and (max-width:1180px) {
    .twc-image-content {
        --ic-spacing:var(--twc-gap-container);
        --ic-spacing-fullwidth:var(--twc-gap-container);
    }

    /* Style full width */
    .twc-image-content[class*="style-"] {--ic-spacing:calc(var(--twc-gap-container) + 10px);}
}

@media only screen and (max-width:768px) {
    .twc-image-content__inner {flex-direction:column;}
    .twc-image-content__col {width:100%;}
    .twc-image-content__col.image {margin-bottom:25px;}

    /* Style full width */
    .twc-image-content[class*="style-"] .twc-image-content__col.content {padding:0 var(--twc-gap-container);}
}