/* 整個內容方塊 */
.index校園影片8 {
    /*height : 300px;   --- if simpleBar (i.e. scroll bar) is set on the whole block, change the number.*/
    margin : 0 auto;
    max-width : 100%;
}

    /* 內容方塊標題文字 (h2) */
    .index校園影片8 .blockTitle {
    }

.index校園影片8 .blockTitle img {
  max-width : 60%;
    }

        /* 內容方塊標題超連結 */
        .index校園影片8 .blockTitle a {
        }

.index校園影片8 .more
{
   text-align : right;
   padding : 1em;
   font-weight : bold;
}

    /* 影片容器，每個影片都放在裡面 */
    .index校園影片8 .loopElementList {
        /*height : 300px;   --- if simpleBar (i.e. scroll bar) is set on the content, change the number.*/
    }

    /* 活動容器，全部影片都放在裡面 */
    .index校園影片8 .elementContainer {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        column-gap: var(--gap-width);
        row-gap: var(--gap-width);
    }

    /*單一影片*/
    .index校園影片8 .eachMedia {
        aspect-ratio : 120 / 63;
        overflow:hidden;
        border: solid 2px #FFFFFF;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    }

        .index校園影片8 .eachMedia iframe
        {
            width : 100%;
            height : 100%;
        }

        @media (max-width: 767px) {
            .index校園影片8 {
        
    }
        .index校園影片8 .elementContainer
        {
            display : block;
        }

        .index校園影片8 .eachMedia
        {
            margin-bottom : 1em;
        }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .index校園影片8 {
        --gap-width: 2em;
    }
        .index校園影片8 .elementContainer {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
        }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .index校園影片8 {
        --gap-width: 2em;
    }
}

@media (min-width: 1920px) {
    .index校園影片8
    {
        --gap-width : 3em;
    }
}