/* --- 基礎設定 --- */
* {
    box-sizing: border-box;
    margin    : 0;
    padding   : 0;
}

body {

    font-family     : 'Playfair Display', 'Noto Serif TC', serif;
    /* 中英文字型搭配 */
    background-color: #FDFBF6;
    /* 米白色背景 */
    color           : #5e4b35;
    /* 深棕色文字 */
    height          : 100vh;
    overflow-x      : hidden;
}

/* --- 主容器：左右分割 --- */
.container {
    display: flex;
    height : 100vh;
    width  : 100%;
}

/* --- 左側區域：文字內容 --- */
.left-panel {
    width          : 40%;
    /* 左側佔寬度 */
    padding        : 4rem;
    display        : flex;
    flex-direction : column;
    justify-content: center;
    /* 垂直置中 */
    position       : relative;
}

.header-meta {
    font-size     : 0.9rem;
    letter-spacing: 1px;
    margin-bottom : 3rem;
    color         : #8b7d6b;
}

.logo-area {
    position: absolute;
    top     : 4rem;
    right   : 1rem;
    width   : 130px;
}

.logo-area img {
    width : 100%;
    height: auto;
}

h1 {
    font-size     : 3.5rem;
    font-weight   : 700;
    line-height   : 1.2;
    margin-bottom : 0.5rem;
    letter-spacing: 2px;
}

h2 {
    font-size    : 2.5rem;
    font-weight  : 400;
    margin-bottom: 3rem;
    color        : #8b7d6b;
}

.description {
    font-size    : 1rem;
    line-height  : 1.8;
    margin-bottom: 2rem;
    color        : #333;
}

.instruction {
    font-size : 0.9rem;
    font-style: italic;
    color     : #888;
    margin-top: auto;
    /* 推到底部 */
}

/* --- 右側區域：圖片網格 --- */
.right-panel {
    width                : 60%;
    /* 右側佔寬度 */
    display              : grid;
    /* 定義 3 欄，每欄等寬 */
    grid-template-columns: repeat(3, 1fr);
    /* 定義 3 列，高度自動填滿 */
    grid-template-rows   : repeat(3, 1fr);
    gap                  : 10px;
    /* 圖片之間的間距 */
    padding              : 10px;
    height               : 100vh;
}

/* 圖片連結區塊樣式 */
.grid-item {
    position        : relative;
    overflow        : hidden;
    background-color: #eee;
    /* 圖片載入前的背景色 */
}

.grid-item img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    /* 確保圖片填滿格子且不變形 */
    transition: transform 0.5s ease;
}

/* 滑鼠懸停效果 */
.grid-item:hover img {
    transform: scale(1.05);
    /* 微微放大 */
}

/* --- 格子排列邏輯 (核心部分) --- */

/* 第 1 張圖：左上 (米粒項鍊) -> 跨 2 欄 */
.item-1 {
    grid-column: span 2;
}

/* 第 2 張圖：右上 (Logo 棕色塊) -> 預設 1 欄 */
.item-2 {
    grid-column: span 1;
}

/* 第 3 張圖：中左 (綠色背景耳環) -> 預設 1 欄 */
.item-3 {
    grid-column: span 1;
}

/* 第 4 張圖：中右 (黃色卡片) -> 跨 2 欄 */
.item-4 {
    grid-column: span 2;
}

/* 第 5, 6, 7 張圖：下方三張 -> 各佔 1 欄 (預設) */
/* 不需要額外寫 CSS，Grid 會自動排在第三列 */

/* --- RWD 手機版適配 --- */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        /* 改為上下排列 */
        height        : auto;
    }

    .left-panel,
    .right-panel {
        width : 100%;
        height: auto;
    }

    .left-panel {
        padding: 2rem;
    }

    .right-panel {
        /* 手機版改成 2 欄排列比較好看，或者維持 1 欄 */
        grid-template-columns: 1fr 1fr;
        grid-template-rows   : auto;
        height               : auto;
    }

    /* 手機版重置跨欄設定，讓圖片整齊排列 */
    .item-1,
    .item-4,
    .item-7 {
        grid-column: span 2;
        /* 大圖跨滿 */
    }

    .logo-area {
        top: 2rem;
    }
.item-6 img{
          
}
.item-5 img{
           width: 121%;
}

}



@media (max-width: 430px) {


 .header-meta {
    margin-bottom: 10rem;
}


}