/* 基本容器設定 */
.image-grid {
  display: grid; /* 啟用 Grid 佈局 */
  grid-template-columns: 1fr 1fr; /* 定義兩欄，每欄佔據可用空間的一半 */
  gap: 16px; /* 圖片之間的間距 */
  padding: 16px; /* 容器的內邊距 */
}

/* 讓圖片填滿其網格單元 */
.image-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 確保圖片填滿而不變形 */
  display: block; /* 移除圖片底部的空隙 */
}

/* 讓第三張圖片橫跨兩欄 */
.image-grid img:nth-child(3) {
  grid-column: 1 / -1; /* 從第一欄橫跨到最後一欄 */
}

/* --- RWD 響應式設計 --- */
/* 當螢幕寬度小於 768px (例如平板或手機) */
@media (max-width: 768px) {
  .image-grid {
    grid-template-columns: 1fr; /* 改為單欄佈局 */
  }
  
  /* 在單欄模式下，不再需要讓第三張圖橫跨，所以可以移除 (雖然不移除也不影響) */
  .image-grid img:nth-child(3) {
    grid-column: auto;
  }
}