export default function Page() {

    const imgList = [
        "https://cdn.pixabay.com/photo/2023/10/30/01/31/duck-8351436_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/08/09/15/06/child-8179655_1280.jpg",
        "https://cdn.pixabay.com/photo/2024/09/25/14/32/lighthouse-9073925_1280.png",
        "https://cdn.pixabay.com/photo/2024/01/31/15/08/field-8544288_1280.jpg",
        "https://cdn.pixabay.com/photo/2024/03/28/15/56/chilli-8661184_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/12/22/12/30/trees-8463651_1280.png",
        "https://cdn.pixabay.com/photo/2022/12/01/04/43/girl-7628308_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/03/16/15/28/cactus-7856967_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/10/13/17/10/mushroom-8313142_1280.jpg",
        "https://cdn.pixabay.com/photo/2021/11/05/11/06/pumpkins-6771028_1280.jpg",
        "https://cdn.pixabay.com/photo/2022/08/22/16/53/honey-bee-7404063_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/08/07/15/18/woman-8175307_1280.jpg",
        "https://cdn.pixabay.com/photo/2024/06/05/19/45/mountains-8811206_1280.jpg",
        "https://cdn.pixabay.com/photo/2023/04/10/15/56/bowl-7914112_1280.jpg",
    ];

    return (
        <div className="max-w-7xl mx-auto">
            <div className="w-full columns-2xs gap-x-5 mask-b-from-50%">
                {
                    imgList.map((url, i) => (
                        <img className="mb-5 break-inside-avoid"
                             src={ url }
                             alt=""
                             key={ i }/>
                    ))
                }
            </div>
        </div>
    )
}