/* 整個內容方塊 */
.index活動花絮2 {
    --num-of-pic-per-activity: 1;
    --title-align: left;
    /* --For simpleBar Start-- */
    --content-height-without-heading: auto;
    --whole-block-height: auto;
    /* --For simpleBar End-- */

    --border-style: solid 2px #dddddd;
    --border-color: #edecea;
    --box-shadow: 2px 2px 8px -2px rgba(148,146,148,0.4);
    --box-shadow-hover: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    --num-of-heading-line : 2;
    --heading-bg-color : #FFFFFF;
    --heading-padding-width : 10px;
    --heading-font-weight : bold;

    --activity-gap-vertical : 2em;
    --activity-gap-hori : 2%;
    
    height: var(--whole-block-height);
}

    /* 內容方塊標題文字 (h2) */
    .index活動花絮2 .blockTitle {
        text-align: var(--r-index-block-title-align, --title-align);
    }

        .index活動花絮2 .blockTitle h2 {
        }

        /* 內容方塊標題超連結 */
        .index活動花絮2 .blockTitle a {
        }

    /* 活動容器，每個活動都放在裡面 */
    .index活動花絮2 .loopElementList {
        height: var(--content-height-without-heading);
    }

    /* 活動容器 */
    .index活動花絮2 .elementContainer {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: stretch;

        padding: var(--r-container-padding, 1em);
    }

    /*單一活動*/
    .index活動花絮2 .eachActivity {
        margin: 0 0 var(--activity-gap-vertical) 0;
        flex-basis: calc(100% / var(--num-of-photo) - var(--activity-gap-hori));
    }

    .index活動花絮2 .innerShell {
        border: var(--border-style); /* Change */
        padding: var(--r-el-padding, 1rem);
        background-color: var(--border-color);
        background-image: none;
            
        box-shadow: var(--box-shadow);
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: stretch;

        /* 2024-11-02 */
        transition: all .5s;
    }

    .index活動花絮2 .eachActivity:has(.absoluteCoverLinks:hover) .innerShell {
        box-shadow: var(--box-shadow-hover);
        background-color: transparent;
        background-image: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
    }

    /*圖片容器*/
    .index活動花絮2 .thumbList {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: stretch;
    }

    /*圖片*/
    .index活動花絮2 .eachActivity .themePic {
        width: calc(100% / var(--num-of-pic-per-activity)); 
        align-self: flex-start;

        /* 2024-11-02 */
        transition: all .5s;
    }

    .index活動花絮2 .eachActivity:has(.absoluteCoverLinks:hover) .themePic {
        transform: scale(1.02);
    }

    /*標題*/
    .index活動花絮2 .eachActivity .heading {
        font-weight: var(--heading-font-weight);
        background-color: var(--heading-bg-color);
        border: solid var(--heading-padding-width) transparent;

        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: var(--num-of-heading-line);
        -webkit-box-orient: vertical;
    }

    .index活動花絮2 .eachActivity .absoluteCoverLinks {
    }

    .index活動花絮2 .showMoreLoopElements {
    }

/* Glide Settings Start ===================================================*/

.index活動花絮2 {
    --glide-height: 30vh;
}

    .index活動花絮2 .glide {
        height: var(--glide-height);
    }

    .index活動花絮2 .glide .eachActivity {
        margin: 0 0 0 0;
        max-width: none;
        height: 100%;
    }

    .index活動花絮2 .glide .thumbList {
        height: calc(100% - 1.5em - 20px);
    }

    .index活動花絮2 .glide .eachActivity .themePic {
        width: auto;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .index活動花絮2 .glide__track, .index活動花絮2 .glide__slides {
        height: 100%;
    }

    .index活動花絮2 .glide .glide__slide {
        border: none 0;
        padding: 0;
        border-radius: 0;
    }

/* Glide Settings End ===================================================*/

@media (max-width: 480px) {
    .index活動花絮2 .eachActivity {
        flex-basis: 100%;
    }

    .index活動花絮2 .glide .eachActivity {
        max-width: var(--glide-width);
    }

    /* 只顯示頭 5 個活動 
    .index活動花絮2 .eachActivity {
        display: none;
    }

    .index活動花絮2 .eachActivity:nth-child(-n+5) {
        display: block;
    }*/
}

@media (min-width: 481px) and (max-width: 767px) {
    .index活動花絮2 {
        --num-of-photo: 2;
    }

    .index活動花絮2 .glide .eachActivity {
        max-width: var(--glide-width);
    }

    /* 只顯示頭 4 個活動 
    .index活動花絮2 .eachActivity {
        display: none;
    }

    .index活動花絮2 .eachActivity:nth-child(-n+4) {
        display: block;
    }*/
}

@media (min-width: 768px) and (max-width: 979px) {
    .index活動花絮2 {
        --num-of-photo: 2;
    }

    /* 只顯示頭 6 個活動 
    .index活動花絮2 .eachActivity {
        display: none;
    }

    .index活動花絮2 .eachActivity:nth-child(-n+6) {
        display: block;
    }*/
}

@media (min-width: 980px) and (max-width:1199px) {
    .index活動花絮2 {
        --num-of-photo: 3;
    }

     /*只顯示頭 6 個活動 
    .index活動花絮2 .eachActivity {
        display: none;
    }

    .index活動花絮2 .eachActivity:nth-child(-n+6) {
        display: block;
    }*/
}

@media (min-width: 1200px) and (max-width:1919px) {
    .index活動花絮2 {
        --num-of-photo: 3;
    }
}

@media (min-width: 1920px) {
    .index活動花絮2 {
        --num-of-photo: 4;
    }
}