/*********************************************
 * Activity highlighted
**********************************************/
.vii-highlighted-activities {
    --radical-size:70vh;
    --white-size:100vh;
}

.vii-highlighted-activities__bg {
    height:100vh;
    background:radial-gradient(150vh 150vh at 50% 50%, #d53432 3%, #a32739 13%, #781d40 23%, #531446 34%, #350c4b 45%, #1d074f 56%, #0c0351 69%, #030053 83%, #000054 100%);

    /* prefixed + standard */
    mask-image:linear-gradient(black, black), url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODUwIiBoZWlnaHQ9Ijg1MCIgdmlld0JveD0iMCAwIDg1MCA4NTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0wLjAyOTMzOTEgNC40NzIxMmUtMDVMMC4wMjkzNTE1IDI4My4zMzNMMTQxLjgxOSA0MjQuODY4TC0xLjIzODM2ZS0wNSA1NjYuNjk2TDAgODUwTDI4My4zMTQgODUwTDQyNC45NTYgNzA4LjM0OEw0MjUuMDE1IDcwOC4zNDhMNTY2LjY4NiA4NTBMODQ5Ljk3MSA4NTBMODQ5Ljk3MSA1NjYuNjk2TDcwOC40NzUgNDI1LjEzMkw4NTAgMjgzLjMzM0w4NTAgNy41Njc3OGUtMDZMNTY2LjY1NyAxLjk5NTMxZS0wNUw0MjQuOTg1IDE0MS42ODFMMjgzLjM0MyAzLjIzMzcxZS0wNUwwLjAyOTMzOTEgNC40NzIxMmUtMDVaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K");

    -webkit-mask-size:100vw 100vh;
    mask-size:100vw 100vh;

    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;

    -webkit-mask-position:center center;
    mask-position:center center;

    /* Safari uses different composite keywords */
    mask-composite:subtract;
}

/* layer */
.vii-highlighted-activities__bg .layer {
    height:var(--white-size);
}

.vii-highlighted-activities__bg .layer i {
    background:radial-gradient(var(--radical-size) var(--radical-size) at 50% 50%, #e61e2a 41%, #d91c2c 43%, #981338 52%, #610c42 61%, #370749 70%, #19034f 77%, #060052 83%, #000054 88%);
}

.vii-highlighted-activities__bg .layer i.nth-1 { transform:scale(2.6); }
.vii-highlighted-activities__bg .layer i.nth-2 { transform:scale(1.8); }
.vii-highlighted-activities__bg .layer i.nth-3 { transform:scale(1.4); }
.vii-highlighted-activities__bg .layer i.nth-4 { transform:scale(1.15); }

/* info */
.vii-highlighted-activities__info {
    margin-top:-100vh;
    min-height:100vh;
}

.vii-highlighted-activities__item {
    min-height:100vh;
}

.vii-highlighted-activities__item:first-child {
    min-height:120vh;
    padding-top:20vh;
}

.vii-highlighted-activities__item .inner {
    max-width:450px;
    gap:24px;
    transform:perspective(1000px);
    transform-origin:bottom center;
}

/* number */
.vii-highlighted-activities__item-number-wrapper {
    font-size:152px;
    letter-spacing:-0.08em;
    line-height:.9;
    align-items:flex-start;
}

.vii-highlighted-activities__item-number-wrapper .append {
    font-size:.6em;
    margin-left:.15em;
}

.vii-highlighted-activities__heading {
    padding:.5em .9em;
    min-height:60px;
    min-width:250px;
}

.vii-highlighted-activities__mobile-title {
    min-height:20vh;
    top:var(--vii-header-height);
}
.vii-highlighted-activities__mobile-title {
    min-height:20vh;
    top:var(--vii-header-height);
}
@media only screen and (max-height:650px) {
    .vii-highlighted-activities__mobile-title {
        min-height:15vh;
    }
}

/*********************************************
 * Activity highlighted Responsive
**********************************************/
@media only screen and (max-width:1023px) {
    .vii-highlighted-activities {
        --radical-size:70vw;
        --white-size:100vw;
    }

    .vii-highlighted-activities__item {
        min-height:unset;
        padding:70px 0;
    }

    .vii-highlighted-activities__item:first-child {
        padding-top:40vh;
        min-height:unset;
    }

    .vii-highlighted-activities__item:last-child {
        padding-bottom:40vh;
    }

    .vii-highlighted-activities__item .inner {
        max-width:240px;
        gap:16px;
    }

    /* number */
    .vii-highlighted-activities__item-number-wrapper {
        font-size:80px;
    }

    .vii-highlighted-activities__heading {
        min-height:38px;
        min-width:150px;
    }

    .vii-highlighted-activities__item-content {
        font-size:15px !important;
        font-weight:500 !important;
    }
}

@media only screen and (max-width:600px) {
    .vii-highlighted-activities__mobile-title {
        display:flex;
    }
    .vii-highlighted-activities__item-content {
        font-size:13px !important;
    }
}

@media only screen and (max-width:400px) {
    .vii-highlighted-activities__item .inner {
        max-width:200px;
        --vii-size-h3:18px;
    }
}

/*********************************************
 * Activity highlighted Animation
**********************************************/
.vii-highlighted-activities__bg {
    opacity:0;
}