/*********************************************
 * Content Hover Reveal
**********************************************/
.vii-content-hover-reveal {--chr-padding:30px;}
.vii-content-hover-reveal__inner {margin:0 calc(-1 * var(--chr-padding));}
.vii-content-hover-reveal__item {padding:0 var(--chr-padding); transition:var(--vii-transition);}

/* desktop */
@media only screen and (min-width:1024px) {
    /* active */
    .vii-content-hover-reveal__item.active .vii-content-hover-reveal__item-short-content,
    .vii-content-hover-reveal__item:not(.active) .vii-content-hover-reveal__item-full-content {display:none;}
    .vii-content-hover-reveal__item:not(.active) {width:20%;}
    .vii-content-hover-reveal__item.active {width:60%;}

    /* content */
    .vii-content-hover-reveal__item-full-content {opacity:0;}
    .active .vii-content-hover-reveal__item-full-content {animation:fade-in-up .3s ease .3s forwards;}
    .vii-content-hover-reveal__item-short-title {margin-bottom:var(--vii-spacing-30) !important;}
}

@keyframes fade-in-up {
    0% {transform:translateY(15px); opacity:0;}
    100% {transform:translateY(0); opacity:1;}
}

/* order */
.vii-content-hover-reveal__item-order {position:relative;}
.vii-content-hover-reveal__item-order:before {
    content:""; position:absolute; top:50%;
    width:100%; height:2px; background-color:var(--vii-color-neutral-200);
}
.vii-content-hover-reveal__item-order-number {background-color:#fff; position:relative; z-index:2; padding-right:10px;}

/*********************************************
 * Content Hover Reveal Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-content-hover-reveal {--chr-padding:calc(var(--vii-gap-side) * 0.5);}
}
@media only screen and (max-width:1024px) {
    .vii-content-hover-reveal__item:not(.active) {width:25%;}
    .vii-content-hover-reveal__item.active {width:50%;}
}
@media only screen and (max-width:1023px) {
    .vii-content-hover-reveal__inner {height:auto !important;}
    .vii-content-hover-reveal__item:not(:last-child) {margin-bottom:var(--vii-spacing-default);}
    .vii-content-hover-reveal__item:not(.active),
    .vii-content-hover-reveal__item.active {width:100%;}

    .vii-content-hover-reveal__item-short-content {display:none;}
}