/*********************************************
 * Page Work Detail
**********************************************/
/*header*/
.site-content__header {
    --wd-width-info:420px;
    --wd-width-icon:32px;
    --wd-size-icon:15px;
}

/*title*/
.site-content__title-description {max-width:660px; padding-right:20px;}

/*info*/
.site-content__info {width:var(--wd-width-info);}
.site-content__info-item:not(:last-child) {
    border-bottom:1px solid var(--vii-color-neutral-200);
    padding-bottom:10px; margin-bottom:15px;
    width:50%; padding-right:15px;
}

/*icon*/
.site-content__info-item__icon {
    width:var(--wd-width-icon); height:var(--wd-width-icon);
    border-radius:50%; border:1px solid var(--vii-color-neutral-200);
    display:flex; align-items:center; justify-content:center;
    color:var(--vii-color-primary);
    font-size:var(--wd-size-icon);
}
.site-content__info-item__icon i {line-height:0;}

/*value*/
.site-content__info-item__value {padding:6px 0 0 10px; width:calc(100% - var(--wd-width-icon));}
.site-content__info-item__value .info-title {margin-bottom:5px;}
.site-content__info-item__value ul {
    list-style:none; margin:0;
    display:flex; flex-wrap:wrap;
}
.site-content__info-item__value ul li {padding:0;}
.site-content__info-item__value ul li:not(:last-child) {margin-right:20px;}
.site-content__info-item__value ul li a {text-decoration:underline;}
.site-content__info-item__value ul li a:hover {text-decoration:none;}

/*********************************************
 * Page Work Detail - Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .site-content__title-description {max-width:calc(100% - var(--wd-width-info));}
}
@media only screen and (max-width:1024px) {
    .site-content__header {--wd-width-info:350px;}
}
@media only screen and (max-width:768px) {
    .site-content__header {flex-direction:column;}
    .site-content__title-description {
        max-width:100%; width:100%;
        padding-right:0; margin-bottom:10px;
    }
    .site-content__info {width:100%;}

}
@media only screen and (max-width:375px) {
    .site-content__info-item {width:100%; padding-right:0;}
}