.img-responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 父容器設置比例盒 */
.video-container {
    position: relative;
    width: 100%;
    /* 讓影片寬度填滿父容器 */
    padding-bottom: 56.25%;
    /* 16:9 比例，(9 / 16) * 100 = 56.25% */
    height: 0;
    /* 高度設為 0，透過 padding-bottom 模擬比例 */
    overflow: hidden;
}

/* 嵌入的影片設置為絕對定位，填滿比例盒 */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border: 0;
    /* 移除邊框 */
}

/* 圖片容器的基本樣式 */
.zoom-effect {
    display: inline-block;
    /* 允許多個圖片排列 */
    overflow: hidden;
    /* 隱藏超出容器的部分 */
}

/* 圖片的樣式 */
.zoom-effect img {
    display: block;
    /* 確保圖片無多餘間距 */
    width: 100%;
    /* 確保圖片填滿容器寬度 */
    height: auto;
    /* 保持圖片比例 */
    transition: transform 0.3s ease, filter 0.3s ease;
    /* 平滑效果 */
}

/* 滑鼠懸停時的縮放效果 */
.zoom-effect:hover img {
    transform: scale(1.1);
    /* 圖片放大 10% */
    filter: brightness(1.1);
    /* 增加亮度（可選） */
}