/*********************************************
 * Icon Description
**********************************************/
.vii-icon-description {container:icon-description / inline-size;}
.vii-icon-description-inner {
    --circle-size:72px;
    --text-size:calc(var(--circle-size) * 0.5);
    --border-color:rgba(193, 190, 186, 1);
    --bg-color:rgba(241, 237, 232, 1);
    --icon-color:var(--vii-color-primary);
    --grid-gap-x:20px;
    --grid-gap-y:24px;
    --grid-col:5;
}
.vii-icon-description-inner.layout-number {
    --text-size:calc(var(--circle-size) * 0.6);
    --vii-spacing-heading:8px;
    --grid-col:2;
}
.vii-icon-description-inner.layout-progress {
    --circle-size:108px;
    --grid-col:6;
}
.vii-bg-yellow .vii-icon-description-inner {
    --border-color:rgba(182, 176, 163, 1);
    --bg-color:rgba(227, 220, 204, 1);
}
.txt_color_white .vii-icon-description-inner {
    --border-color:rgba(38, 33, 29, 1);
    --bg-color:rgba(47, 41, 36, 1);
}

/* item */
.vii-icon-description__item {}
.layout-number .vii-icon-description__item {align-items:flex-start;}

/* icon */
.vii-icon-description__icon {
    min-width:var(--circle-size); width:var(--circle-size); height:var(--circle-size);
    border-radius:50%; border:1px solid var(--border-color);
    background:var(--bg-color); color:var(--icon-color);

    font-size:var(--text-size);
    font-family:"Poiret One", sans-serif; font-weight:400;
}

/* image */
.vii-icon-description__icon .image {width:60%;}

/* text */
.vii-icon-description__item-text {max-width:220px;}
.layout-number .vii-icon-description__item-text {max-width:500px;}
.layout-default .vii-icon-description__item-text {font-size:var(--vii-size-18);}

/* layout progress */
.vii-icon-description-inner.layout-progress {justify-content:center;}
.layout-progress .vii-icon-description__item {flex-direction:column; gap:8px; position:relative;}
.layout-progress .vii-icon-description__item-text {
    font-size:var(--vii-size-body-small); font-weight:700; text-align:center;
    letter-spacing:0.04em; line-height:1.7;
}
.layout-progress .vii-icon-description__item:before {
    content:"\e927"; font-family:var(--vii-font-icomoon), fantasy;
    position:absolute; left:100%; top:50%;
    transform:translate(0, -50%);
}

.layout-progress .vii-icon-description__item:last-child:before {display:none;}
@container icon-description (min-width:801px) {
    .layout-progress .vii-icon-description__item:nth-child(6n):before {display:none;}
}

/*********************************************
 * Icon Description Responsive
**********************************************/
@container icon-description (max-width:1200px) {
    .vii-icon-description-inner {--grid-col:3;}
    .vii-icon-description-inner.layout-progress {--grid-col:4;}
}
@container icon-description (max-width:800px) {
    .vii-icon-description-inner {--grid-col:2;}
    .vii-icon-description-inner.layout-number {--grid-col:1;}
    .vii-icon-description-inner.layout-progress {--grid-col:3;}
}
@container icon-description (max-width:800px) and (min-width:481px) {
    .layout-progress .vii-icon-description__item:nth-child(3n):before {display:none;}
}
@container icon-description (max-width:480px) {
    .vii-icon-description-inner {
        --circle-size:55px;
        --grid-col:1;
    }
    .vii-icon-description-inner.layout-progress {
        --grid-col:2;
        --circle-size:90px;
    }
    .layout-progress .vii-icon-description__item:nth-child(2n):before {display:none;}
    .layout-progress .vii-icon-description__item:before {display:none;}
}