/*********************************************
 * Icon Description > Default
**********************************************/
/* general */
.vii-icon-description {container:icon-description / inline-size;}
.vii-icon-description__inner {--grid-gap-y:var(--vii-spacing-40); --ic-width:64px;}
.vii-icon-description__image {--width:var(--ic-width);}

/* Layout */

.vii-icon-description.style-simple .vii-icon-description__inner {
    --grid-gap-x:clamp(var(--vii-gap-container), 111px, calc(var(--vii-gap-side) * 2));
}
.vii-icon-description.style-simple .vii-icon-description__image {
    background:rgba(0, 0, 0, 0); color:var(--vii-color-light-blue); font-size:48px;
    border:none; padding:4px;
}
.vii-icon-description.style-simple .vii-icon-description__item-title {--vii-spacing-heading:4px;}
.vii-icon-description.style-simple .vii-icon-description__item-content {
    padding-left:16px; width:calc(100% - var(--ic-width));
}

/* responsive */
@media only screen and (min-width:641px) {
    .vii-icon-description.style-simple .vii-icon-description__inner {--grid-col:2;}
    .vii-icon-description.style-simple .vii-icon-description__item:not(:last-child) {
        position:relative; padding-bottom:var(--vii-spacing-40);
        border-bottom:1px solid rgba(34, 34, 34, .2);
    }
    .vii-icon-description.style-simple .vii-icon-description__item:nth-child(odd):before {
        content:"";
        width:var(--grid-gap-x); height:1px; background:rgba(34, 34, 34, .2);
        position:absolute; bottom:-1px; left:100%;
    }
}
@media only screen and (max-width:640px) {
    /* general */
    .vii-icon-description__item-content {padding-left:10px;}

    /* Layout */
    .vii-icon-description.style-simple .vii-icon-description__inner {
        --grid-col:1;
        --grid-gap-y:var(--vii-spacing-24);
        --ic-width:40px;
    }
    .vii-icon-description.style-simple .vii-icon-description__item:not(:last-child) {
        padding-bottom:var(--vii-spacing-24);
        border-bottom:1px solid rgba(34, 34, 34, .2);
    }
    .vii-icon-description.style-simple .vii-icon-description__image {padding:0; font-size:40px;}
}
@container icon-description (max-width: 540px) {
    .vii-icon-description.style-simple .vii-icon-description__inner {--grid-col:1;}
    .vii-icon-description.style-simple .vii-icon-description__item:nth-child(odd):before {opacity:0;}
}
@container icon-description (min-width: 541px) {
    .vii-icon-description.style-simple .vii-icon-description__item:nth-last-child(2):nth-child(odd),
    .vii-icon-description.style-simple .vii-icon-description__item:last-child:nth-child(odd),
    .vii-icon-description.style-simple .vii-icon-description__item:last-child:nth-child(even) {
        border-bottom:none; padding-bottom:0;
    }
    .vii-icon-description.style-simple .vii-icon-description__item:nth-last-child(2):nth-child(odd):before,
    .vii-icon-description.style-simple .vii-icon-description__item:last-child:nth-child(odd):before {opacity:0;}
}

/*********************************************
 * Icon Description > with border
**********************************************/
.vii-icon-description.style-w-border .vii-icon-description__inner {--grid-gap-x:15px; --ic-width:96px;}
.vii-icon-description.style-w-border .vii-icon-description__item {flex-direction:column; gap:16px 0;}
.vii-icon-description.style-w-border .vii-icon-description__item-title {--vii-spacing-heading:8px;}
.vii-icon-description.style-w-border .vii-icon-description__image {--size:40px; padding:16px;}
.vii-icon-description.style-w-border .vii-icon-description__item-description {font-size:var(--vii-size-18);}

/* responsive */
@container icon-description (max-width:650px) {
    .vii-icon-description.style-w-border .vii-icon-description__inner {
        --grid-col:2;
        --grid-gap-x:clamp(var(--vii-gap-container), 52px, var(--vii-gap-side));
        --ic-width:64px;
        --size:40px;
    }
    .vii-icon-description.style-w-border .vii-icon-description__item {flex-direction:row;}
    .vii-icon-description.style-w-border .vii-icon-description__item-content {
        padding-left:16px; width:calc(100% - var(--ic-width));
    }
    .vii-icon-description.style-w-border .vii-icon-description__image {padding:12px;}
}
@container icon-description (max-width:540px) {
    .vii-icon-description.style-w-border .vii-icon-description__inner {
        --grid-col:1;
        --grid-gap-y:30px;
        --ic-width:96px;
    }
    .vii-icon-description.style-w-border .vii-icon-description__item:not(:last-child) {
        padding-bottom:30px; border-bottom:1px solid var(--vii-color-light-blue);
    }
    .vii-icon-description.style-w-border .vii-icon-description__image {--size:64px; padding:16px;}
}
@media only screen and (min-width:768px) and (max-width:920px) {
    @container icon-description (max-width:650px) {
        .vii-icon-description.style-w-border .vii-icon-description__inner {--ic-width:56px;}
        .vii-icon-description.style-w-border .vii-icon-description__item-content {padding-left:10px;}
        .vii-icon-description.style-w-border .vii-icon-description__image {
            --size:36px;
            padding:10px;
        }
    }
}
@media only screen and (max-width:480px) {
    .vii-icon-description.style-w-border .vii-icon-description__inner {--ic-width:50px;}
    .vii-icon-description.style-w-border .vii-icon-description__image {
        --size:32px;
        padding:8px;
    }
}