/* ============================
   Gallery Layout
   ============================ */

.gallery {
    display: flex;
    flex-wrap: wrap;
    /* ถ้าเต็มบรรทัดให้ลงแถวใหม่ */
    gap: 10px;
    align-items: flex-start;
    margin: 20px 0;
}

.gallery .preview {
    flex: 1 1 60%;
    /* รูปใหญ่กินพื้นที่ประมาณ 60% */
    text-align: center;
}

.gallery .preview img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.gallery .thumbnails {
    flex: 1 1 35%;
    /* thumbnails อยู่ขวา */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.gallery .thumbnails img {
    width: 100px;
    height: auto;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 4px;
    transition: border 0.2s;
}

.gallery .thumbnails img:hover {
    border: 1px solid #E2394E;
    /* เปลี่ยนสี border เวลา hover */
}

/* ============================
   Responsive
   ============================ */

/* Tablet: ถ้าหน้าจอ <= 1024px */
@media (max-width: 1024px) {
    .gallery {
        flex-direction: column;
        /* thumbnails ลงมาใต้ preview */
    }

    .gallery .preview,
    .gallery .thumbnails {
        flex: 1 1 100%;
        /* ใช้เต็มแถว */
    }

    .gallery .thumbnails {
        justify-content: center;
        /* จัดกลาง */
    }
}

/* Mobile: ถ้าหน้าจอ <= 600px */
@media (max-width: 600px) {
    .gallery .thumbnails img {
        width: 80px;
        /* รูปเล็กลงหน่อย */
    }
}