.image-container {
    width: 348px;
    height: 348px;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}


    .image-container img {
        border-radius: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }


.horizontal-image {
    width: 540px !important; /* 強制將寬度設為50% */
    left: 25%; /* 將圖片向左移動25%，以保證圖片在容器中保持居中 */
}

.vertical-image {
    width: 348px !important; /* 強制將寬度設為360px */
    left: 0; /* 將圖片置於水平左側 */
    top: 50%; /* 將圖片置於垂直中心 */
    /*transform: translate(0, -50%);*/ /* 使用translate移動圖片以實現垂直置中 */
}


.crop-img {
    width: 348px;
    height: 464px;
    object-fit: cover; /* 裁切圖片，不變形 */
    object-position: center; /* 置中圖片 */
    border-radius: 12px; /* 圓角效果 */
    display: block; /* 保證不受 inline 元素影響 */
}

.crop-img-square {
    width: 348px;
    height: 348px;
    object-fit: cover; /* 裁切圖片，不變形 */
    object-position: center; /* 置中圖片 */
    border-radius: 12px; /* 圓角效果 */
    display: block; /* 保證不受 inline 元素影響 */
}