/**
 * サムネイル画像の縦長対応CSS
 * 縦長画像でも適切に表示されるように調整
 */

/* サムネイルの画像表示を改善 */
.thumbnail img {
    /* coverからcontainに変更して画像全体を表示 */
    object-fit: contain !important;
    /* 背景色を設定して余白部分を目立たなくする */
    background-color: #f8f9fa;
}

/* アクティブ状態のサムネイルにも背景色を適用 */
.thumbnail.active img {
    background-color: #f0f0f0;
}

/* オプション: アスペクト比を変更して縦長画像により適したサイズに */
.thumbnails-grid.vertical-friendly .thumbnail {
    padding-top: 100%; /* 正方形にする場合 */
    /* padding-top: 133%; */ /* 3:4の縦長にする場合 */
}

/* オプション: ホバー時の効果を追加 */
.thumbnail:hover {
    opacity: 0.8;
    transition: opacity 0.3s;
}

/* モーダル内の画像も同様に調整 */
#modal-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    margin: auto;
}