#map { 
    height: 500px; 
    width: 100%; 
}

#quake-list { 
    margin-top: 20px; 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 10px; 
}

#quake-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* จัดให้มี 4 คอลัมน์ */
    gap: 10px;
}

.quake-card {
    border: 1px solid #e1e1e1;
    padding: 10px;
    border-radius: 5px;
    text-align: left;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pagination { 
    margin-top: 20px; 
    text-align: center; 
}

/* สำหรับหน้าจอขนาดเล็กลง (มือถือ) จะจัดเรียงเป็น 1 คอลัมน์ */
@media (max-width: 1200px) {
    #quake-list {
        grid-template-columns: repeat(3, 1fr); /* จัดให้มี 3 คอลัมน์ */
    }
}

/* สำหรับหน้าจอขนาดเล็กที่สุด (มือถือแนวตั้ง) จะจัดเรียงเป็น 1 คอลัมน์ */
@media (max-width: 768px) {
    #quake-list {
        grid-template-columns: repeat(2, 1fr); /* จัดให้มี 2 คอลัมน์ */
    }
}

/* สำหรับหน้าจอขนาดเล็ก (มือถือขนาดเล็ก) จะจัดให้มี 1 คอลัมน์ */
@media (max-width: 480px) {
    #quake-list {
        grid-template-columns: 1fr; /* จัดให้มี 1 คอลัมน์ */
    }
}