/****************************
 * Icon Description
****************************/
.vii-icon-description {container:icon-description/inline-size;}
.vii-icon-description__inner {
    --item-w:clamp(200px, calc(50% - var(--gap) / 2), 440px);
    gap:8px var(--gap);max-width:904px;
    --gap:24px;
    --icon-size:96px;
    --item-mb:8px;
}
.vii-icon-description__inner.layout-list {--item-w:100%;}


/* item */
.vii-icon-description__item {
    width:var(--item-w); min-height:245px;
    padding:32px;
}
.vii-icon-description__inner.layout-list .vii-icon-description__item {min-height:unset;}
.vii-icon-description__item-inner {border-top:1px solid var(--vii-color-blue);}
.vii-icon-description__image {width:var(--icon-size); padding:25px; background:#eef1f5;}
.vii-icon-description__image img {mix-blend-mode:multiply;}
.vii-icon-description__image i {font-size:40px; line-height:1;}
.vii-icon-description__item-content {
    width:calc(100% - var(--icon-size)); padding-left:var(--gap);
}
.vii-icon-description__inner.layout-list .vii-icon-description__item:not(:last-child) {
    margin-bottom:var(--item-mb);
}
.vii-icon-description__item-inner .vii-icon-description__item-content:has( > :only-child) {
    margin-top:auto;margin-bottom:auto;
}

/* item default */
.vc_row.vc_row-has-fill .vii-icon-description__inner {row-gap:var(--gap);--item-mb:var(--gap);}

/* item in VC Row with background image */
.vc_row.vii-row-has-bg-image .vii-icon-description__item {border:1px solid var(--vii-color-light-gray-7);}

/****************************
 * Icon Description Responsive
****************************/
@container icon-description (max-width:768px) {
    .vii-icon-description__inner {
        --icon-size:80px;
        --gap:var(--vii-gap-container);
        --item-mb:var(--vii-gap-container);
    }
    .vii-icon-description__item {padding:var(--gap);}
    .vii-icon-description__item-inner {padding-top:var(--gap);}
    .vii-icon-description__image {padding:16px;}
    .vii-icon-description__image i {font-size:36px;}
}
@container icon-description (max-width:767px) {
    .vii-icon-description__item {padding-top:28px; padding-bottom:28px;min-height:unset;}
    .vii-icon-description__inner.layout-grid .vii-icon-description__item-inner {flex-direction:column;}
    .vii-icon-description__inner.layout-grid .vii-icon-description__image {margin-bottom:16px;}
    .vii-icon-description__inner.layout-grid .vii-icon-description__item-content {width:100%; padding-left:0;}
}
@container icon-description (max-width:480px) {
    .vii-icon-description__inner {
        --icon-size:64px;
        --item-w:100%;
        row-gap:20px;
    }
    .vii-icon-description__item {padding:0; border-radius:0;}
    .vii-icon-description__item-inner {padding-top:24px;}
    .vii-icon-description__image {padding:12px;}
    .vii-icon-description__image i {font-size:30px;}

    .vii-icon-description__inner.layout-list .vii-icon-description__item-inner {flex-direction:column;}
    .vii-icon-description__inner.layout-list .vii-icon-description__image {margin-bottom:16px;}
    .vii-icon-description__inner.layout-list .vii-icon-description__item-content {width:100%; padding-left:0;}

    /* item in VC Row with background image */
    .vc_row.vc_row-has-fill .vii-icon-description__item {padding:24px 20px; border-radius:var(--vii-radius-8);}
    .vc_row.vc_row-has-fill .vii-icon-description__inner {padding-top:var(--gap);}
}