.index英語角12 {
    --title-align: left;
    --content-width: 1200px;
    --gap-width: 2em;
    --font-color: #000000;
    --block-bg-color: #FFFFFF;
    --container-bg-image: url(https://picsum.photos/id/797/2000/1000);
    --container-padding: 3em 1em;
    --block-padding : 1em;
    --more-font-color : #1d36ba;
    --more-font-color-hover : #257537;

    /* --For simpleBar Start-- */
    --content-height-without-heading: auto;
    --whole-block-height: auto;
    /* --For simpleBar End-- */

    height: var(--whole-block-height);
    background-image: var(--container-bg-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: var(--container-padding);
    color: var(--font-color);
}

/* 內容方塊標題文字 (h2) */
.index英語角12 .blockTitle {
    text-align: var(--r-index-block-title-align, --title-align);
}

.index英語角12 .blockTitle h2 {
}

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

.index英語角12 .ptStyleGeneral {
    max-width: var(--content-width);
    margin: 0 auto;
}

.index英語角12 .theGrid {
    display: grid;
    column-gap: var(--gap-width);
    row-gap: var(--gap-width);
}

.index英語角12 .block {
    padding: var(--block-padding);
    background-color: var(--block-bg-color);
    text-align: center;
}

/* 針對影片優化的 .pic 類別 */
.index英語角12 .pic {
    width: 100%;            /* 確保影片寬度撐滿 Grid 的格子 */
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;   /* 強制設定為標準影片 16:9 比例，讓 4 個區塊高度一致 */
    object-fit: contain;    /* 保持影片完整不被裁切 (若影片非 16:9 會自動上下留黑邊) */
    background-color: #000; /* 影片載入前或有黑邊時的底色設定為黑色，視覺更專業 */
    display: block;         /* 移除預設的行內底部空白間隙 */
    margin-bottom: 1em;     /* 讓影片與下方的標題(h2)保持一點呼吸空間 */
}

.index英語角12 .more {
    color: var(--more-font-color);
    font-weight : 200;
    transition : all 0.5s;
}

.index英語角12 .more:hover {
    color : var(--more-font-color-hover);
    font-weight : 900;
}

/* 響應式佈局 (RWD) */
@media (max-width: 767px) {
    .index英語角12 .theGrid {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto;
    }
}

@media (min-width: 768px) and (max-width:1199px) {
    .index英語角12 .theGrid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
    }
}

@media (min-width: 1200px) {
    .index英語角12 .theGrid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
    }
}