/* 1. ギャラリー全体のコンテナ設定 (CSS Gridで3列に) */
.gallery-container {
    /* Gridを有効にし、画像を3列均等に配置 */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1frで均等な幅を3つ作成 */
    gap: 10px; /* 画像間の隙間 */
    
    /* ページの最大幅と中央寄せ */
    max-width: 1200px; /* 3列表示に必要な幅の目安 */
    margin: 0 auto; 
    padding: 20px;
}

/* 2. 個々の画像アイテムの設定 (縦横比の固定) */
.gallery-item {
    /* 縦横比を4:3に固定し、枠の高さを揃える */
    /* padding-bottom: 75%; は、幅に対する高さが75%（4:3）であることを意味します */
    padding-bottom: 75%; 
    position: relative;
    overflow: hidden; /* 枠からはみ出る部分を隠す（トリミング） */
}

/* 3. 画像自体の表示設定 */
.gallery-item img {
    /* 親要素 (.gallery-item) 全体に画像を絶対配置 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* 縦長/横長を問わず、枠を埋めるように画像を拡大・トリミング */
    object-fit: cover; 
    
    /* 画像がぼやけて見えるのを防ぐ（主に高解像度画像用） */
    object-position: center;
    
    /* マウスオーバー時のアニメーション (オプション) */
    transition: transform 0.3s ease;
}

.gallery-item img:hover {
    transform: scale(1.05); /* ホバーで画像を少し拡大 */
}


/* 4. モバイル対応 (レスポンシブデザイン) */
@media (max-width: 768px) {
    .gallery-container {
        /* 画面幅が768px以下の場合、1列表示に切り替え */
        grid-template-columns: 1fr;
    }
    
    .gallery-item {
        /* モバイルでは少し高さを出す（横長の画像が多い場合に視覚的なバランスをとるため） */
        padding-bottom: 80%; 
    }
}