<!--HTML--><style>
        .gallery {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            padding: 20px;
        }
        
        .card {
            width: calc(33.333% - 14px);
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            box-sizing: border-box;
        }
        
        .card-id {
            position: absolute;
            top: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        
        .card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 4px;
            margin-top: 20px;
        }
        
        .design-name {
            font-size: 18px;
            font-weight: bold;
            margin: 10px 0;
            color: #333;
        }
        
        .contest-link {
            display: block;
            color: #0066cc;
            text-decoration: none;
            font-size: 14px;
            margin-top: 5px;
        }
        
        .contest-link:hover {
            text-decoration: underline;
        }
        
        @media (max-width: 768px) {
            .card {
                width: calc(50% - 10px);
            }
        }
        
        @media (max-width: 480px) {
            .card {
                width: 100%;
            }
        }
    </style>

    <script>
        // Пример данных
        const designsData = [
{
id: '1',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/389817.png',
designName: 'Ведьмачий',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=46775#p4627758',
contestName: 'Неделя ведьмака 2023'
},
{
id: '2',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/319272.png',
designName: 'Зимний (темный)',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49336',
contestName: 'Зимний сезонный пропуск 2025'
},
{
id: '3',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/913883.png',
designName: 'Зимний (светлый)',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49336',
contestName: 'Зимний сезонный пропуск 2025'
},
{
id: '4',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/282104.png',
designName: 'Вишня',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49370',
contestName: 'Весеннее испытание'
},
{
id: '5',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/144741.png',
designName: 'Лимоны',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49543#p4990161',
contestName: 'Весенний сезонный пропуск 2025'
},
{
id: '6',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/106128.png',
designName: 'Космонавт',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49543#p4990161',
contestName: 'Весенний сезонный пропуск 2025'
},
{
id: '7',
imageUrl: 'https://i.imgur.com/AkCn9pe.png',
designName: 'Небесный',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49636#p5002520',
contestName: 'Летнее бинго 2025'
},
{
id: '8',
imageUrl: 'https://upforme.ru/uploads/0010/a8/ca/7506/t17931.png',
designName: 'Маяк',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49633#p5001766',
contestName: 'Летнее испытание 2025'
},
{
id: '9',
imageUrl: 'https://i.imgur.com/197EFuW.png',
designName: 'Лес',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49948#p5034803',
contestName: 'Осеннее испытание 2025'
},
{
id: '10',
imageUrl: 'https://i.imgur.com/6OQFHqG.png',
designName: 'Грибной лес',
designLink: 'https://sacramento.rusff.me/viewtopic.php?id=49947#p5034798',
contestName: 'Осеннее бинго 2025'
}
        ];

        function createGallery() {
            const gallery = document.getElementById('gallery');
            
            designsData.forEach(design => {
                const card = document.createElement('div');
                card.className = 'card';
                
                card.innerHTML = `
                    <div class="card-id">${design.id}</div>
                    <img src="${design.imageUrl}" alt="${design.designName}" class="card-image">
                    <div class="design-name">${design.designName}</div>
                    <a href="${design.designLink}" class="contest-link" target="_blank">${design.contestName}</a>
                `;
                
                gallery.appendChild(card);
            });
        }

        // Запускаем создание галереи при загрузке страницы
        document.addEventListener('DOMContentLoaded', createGallery);
    </script>

    <div class="gallery" id="gallery"></div>