/*********************************************
 * Activity
**********************************************/
.vii-activities {
    --number-items:3;
    --height-title:150px;
    --padding-y:84px;
    --height-item:calc(var(--vii-100vh) * 0.9);
    --spacing-item-more:32px;
    --spacing-title-item:20px;
    --max-width-item:420px;

    padding:0 var(--vii-gap-side);
    min-height:calc(var(--number-items) * var(--height-item));
}

/* Heading */
.vii-activities__header {
    top:0; left:0;
    height:var(--height-item); padding-top:var(--padding-y); max-width:596px;
}
.vii-activities__header-inner {margin-bottom:var(--spacing-item-more)}
.vii-activities__header .vii-activities__item {
    max-width:var(--max-width-item); margin:auto;
    padding-top:0; min-height:unset; position:relative;
}

/* Items */
.vii-activities__items {
    max-width:var(--max-width-item); min-height:calc((var(--number-items) - 1 ) * var(--height-item));
    pointer-events:none;
}
.vii-activities__item {
    min-height:var(--height-item);
    padding-top:calc(var(--padding-y) + var(--height-title) + var(--spacing-title-item));
    padding-bottom:calc(var(--padding-y) + var(--spacing-item-more));
    position:sticky; top:0; left:0;
}
.vii-activities__item-inner {box-shadow:0 0 4px 0 rgba(0, 0, 0, .3);}
.vii-activities__item-image {aspect-ratio:420/316; border:9px solid #fff;}
.vii-activities__item-title {
    --vii-color-heading:var(--vii-color-blue);
    padding:6px 33px; min-height:105px;
}

/* Items > rotate */
.vii-activities__header .vii-activities__item .vii-activities__item-inner {transform:rotate(-3deg)}
.vii-activities__items .vii-activities__item:nth-child(3n + 1) .vii-activities__item-inner {transform:rotate(5deg)}
.vii-activities__items .vii-activities__item:nth-child(3n + 2) .vii-activities__item-inner {transform:rotate(2deg)}


/* Decor */
.vii-activities__decoration {pointer-events:none;}
.vii-activities__decoration.crown-2 {
    width:108px;
    top:calc(100% + var(--spacing-title-item)); left:clamp(-100vw, -245px, calc(-1 * var(--vii-gap-side)));
}
.vii-activities__decoration.zigzag-2 {
    width:138px;
    top:calc(100% + var(--spacing-title-item) + 100px); right:clamp(-100vw, -195px, calc(-1 * var(--vii-gap-side) + 10px));
}

/* small screen height */
@media only screen and (max-height:700px) {
    .vii-activities {
        --padding-y:80px;
        --max-width-item:340px;
    }
    .vii-activities__item-image {border-width:6px;}
    .vii-activities__item-title {
        --vii-size-h4:21px;
        min-height:100px;
    }
}
/* large screen height */
@media only screen and (min-height:1000px) {
    .vii-activities {
        --height-item:calc(var(--vii-100vh) * 0.6);
    }
}


/*********************************************
 * All day activity Responsive
**********************************************/
@media only screen and (max-width:1180px) {
    .vii-activities {
        --padding-y:calc(var(--vii-header-height) + var(--spacing-item-more));
        --height-item:calc(var(--vii-100vh) * 0.8);
    }
}
@media only screen and (max-width:480px) {
    .vii-activities {
        --spacing-item-more:20px;
        --height-item:calc(var(--vii-100vh) * 0.6);
        --spacing-title-item:32px;
        --max-width-item:330px;
    }
    .vii-activities__header-inner {margin-bottom:var(--spacing-title-item)}
    .vii-activities__item {padding-bottom:var(--vii-spacing-default);}

    /* decoration */
    .vii-activities__decoration-mobile {width: 55px; bottom: calc(100% + 15px);}
}