<!--HTML-->
    <style>
        /* ===== ОБЩИЕ СТИЛИ ===== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        /* ===== ЗАГОЛОВОК МАРАФОНА ===== */
        .marathon-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .marathon-header h1 {
            font-size: 42px;
            font-weight: 900;
            background: linear-gradient(135deg, #f7971e, #ffd200);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: none;
            letter-spacing: 2px;
        }

        .marathon-header p {
            font-size: 18px;
            color: #666;
            margin-top: 10px;
        }

        /* ===== БЛОК КОЛЛЕКЦИИ ===== */
        .collection-block {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border-radius: 24px;
            padding: 30px 30px 40px;
            margin-bottom: 40px;
            box-shadow: 0 20px 60px rgba(255, 150, 50, 0.15);
            border: 1px solid rgba(255, 200, 100, 0.3);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .collection-block:hover {
            transform: translateY(-3px);
            box-shadow: 0 25px 70px rgba(255, 150, 50, 0.25);
        }

        /* ===== ЗАГОЛОВОК КОЛЛЕКЦИИ ===== */
        .collection-header {
            display: flex;
            align-items: center;
            gap: 18px;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 3px dashed #ffd700;
        }

        .collection-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #f7971e, #ffd200);
            color: #fff;
            font-size: 28px;
            font-weight: 900;
            width: 58px;
            height: 58px;
            border-radius: 50%;
            flex-shrink: 0;
            box-shadow: 0 8px 25px rgba(247, 151, 30, 0.4);
        }

        .collection-title {
            font-size: 28px;
            font-weight: 700;
            color: #2d1b0f;
            letter-spacing: 0.5px;
        }

        .collection-title span {
            background: linear-gradient(135deg, #f7971e, #ffd200);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* ===== СЕТКА ТАБЛИЦЫ ПОДАРКОВ (6 ячеек) ===== */
        .gifts-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 18px;
        }

        /* ===== КАРТОЧКА ПОДАРКА ===== */
        .gift-item {
            background: #fff;
            border-radius: 16px;
            padding: 18px 12px 14px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
        }

        .gift-item:hover {
            transform: translateY(-6px);
            border-color: #ffd700;
            box-shadow: 0 12px 35px rgba(255, 200, 50, 0.25);
        }

        .gift-item .gift-image {
            width: 100%;
            aspect-ratio: 1 / 1;
            object-fit: contain;
            border-radius: 12px;
            background: #fef9f0;
            padding: 6px;
            transition: transform 0.3s ease;
        }

        .gift-item:hover .gift-image {
            transform: scale(1.05);
        }

        .gift-item .gift-name {
            font-size: 15px;
            font-weight: 600;
            color: #2d1b0f;
            margin-top: 10px;
            line-height: 1.3;
            min-height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gift-item .gift-number {
            font-size: 13px;
            color: #999;
            background: #f5f0eb;
            padding: 4px 14px;
            border-radius: 20px;
            display: inline-block;
            margin-top: 6px;
            font-weight: 500;
            letter-spacing: 0.3px;
        }

        /* ===== ПУСТАЯ ЯЧЕЙКА ===== */
        .gift-item.empty {
            background: transparent;
            box-shadow: none;
            border: 2px dashed #e0d6cc;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 140px;
            opacity: 0.5;
        }

        .gift-item.empty span {
            font-size: 28px;
            color: #ccc;
        }

        /* ===== АДАПТИВНОСТЬ ===== */
        @media (max-width: 992px) {
            .gifts-grid {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 600px) {
            .gifts-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 12px;
            }

            .collection-title {
                font-size: 20px;
            }

            .collection-number {
                width: 46px;
                height: 46px;
                font-size: 22px;
            }

            .collection-block {
                padding: 20px 15px 25px;
            }

            .gift-item .gift-name {
                font-size: 13px;
                min-height: 34px;
            }

            .marathon-header h1 {
                font-size: 28px;
            }
        }

        @media (max-width: 400px) {
            .gifts-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
</head>
<body>

<div class="container">

    <!-- ===== ЗАГОЛОВОК СТРАНИЦЫ ===== -->
    <div class="marathon-header">
        <h1>🏖️ Летний марафон подарков</h1>
        <p>Коллекции, которые ты можешь собрать этим летом</p>
    </div>

    <!-- ===== МЕСТО ДЛЯ ВЫВОДА КОЛЛЕКЦИЙ ===== -->
    <div id="giftsApp"></div>

</div>

<script>
    // ================================================================
    // 1. ДАННЫЕ: СПИСОК КОЛЛЕКЦИЙ ['номер', 'название']
    // ================================================================
    const collections = [
        ['1', 'Летний бриз'],
        ['2', 'Солнечный закат'],
        ['3', 'Морские приключения'],
        ['4', 'Тропический рай']
    ];

    // ================================================================
    // 2. ДАННЫЕ: СПИСОК ПОДАРКОВ
    //    ['номер коллекции', 'ссылка на изображение', 'название подарка', 'номер подарка']
    // ================================================================
    const gifts = [
        // Коллекция 1 — Летний бриз
        ['1', 'https://img.icons8.com/fluency/96/sun.png', 'Солнышко', '01'],
        ['1', 'https://img.icons8.com/fluency/96/sunglasses.png', 'Очки', '02'],
        ['1', 'https://img.icons8.com/fluency/96/beach.png', 'Пляж', '03'],
        ['1', 'https://img.icons8.com/fluency/96/cocktail.png', 'Коктейль', '04'],
        ['1', 'https://img.icons8.com/fluency/96/summer.png', 'Лето', '05'],
        ['1', 'https://img.icons8.com/fluency/96/ice-cream.png', 'Мороженое', '06'],

        // Коллекция 2 — Солнечный закат
        ['2', 'https://img.icons8.com/fluency/96/sunset.png', 'Закат', '07'],
        ['2', 'https://img.icons8.com/fluency/96/palm-tree.png', 'Пальма', '08'],
        ['2', 'https://img.icons8.com/fluency/96/sea.png', 'Море', '09'],
        ['2', 'https://img.icons8.com/fluency/96/fire.png', 'Костер', '10'],
        ['2', 'https://img.icons8.com/fluency/96/guitar.png', 'Гитара', '11'],
        ['2', 'https://img.icons8.com/fluency/96/star.png', 'Звезда', '12'],

        // Коллекция 3 — Морские приключения
        ['3', 'https://img.icons8.com/fluency/96/ship.png', 'Корабль', '13'],
        ['3', 'https://img.icons8.com/fluency/96/anchor.png', 'Якорь', '14'],
        ['3', 'https://img.icons8.com/fluency/96/compass.png', 'Компас', '15'],
        ['3', 'https://img.icons8.com/fluency/96/map.png', 'Карта', '16'],
        ['3', 'https://img.icons8.com/fluency/96/treasure.png', 'Сокровище', '17'],
        ['3', 'https://img.icons8.com/fluency/96/binoculars.png', 'Бинокль', '18'],

        // Коллекция 4 — Тропический рай
        ['4', 'https://img.icons8.com/fluency/96/watermelon.png', 'Арбуз', '19'],
        ['4', 'https://img.icons8.com/fluency/96/coconut.png', 'Кокос', '20'],
        ['4', 'https://img.icons8.com/fluency/96/flamingo.png', 'Фламинго', '21'],
        ['4', 'https://img.icons8.com/fluency/96/pineapple.png', 'Ананас', '22'],
        ['4', 'https://img.icons8.com/fluency/96/hibiscus.png', 'Гибискус', '23'],
        ['4', 'https://img.icons8.com/fluency/96/parrot.png', 'Попугай', '24']
    ];

    // ================================================================
    // 3. ФУНКЦИЯ РЕНДЕРИНГА
    // ================================================================
    function renderCollections() {
        const app = document.getElementById('giftsApp');
        let html = '';

        // Проходим по каждой коллекции
        collections.forEach(([colNumber, colTitle]) => {
            // Фильтруем подарки для этой коллекции
            const colGifts = gifts.filter(g => g[0] === colNumber);

            // Начинаем блок коллекции
            html += `
                <div class="collection-block">
                    <!-- Заголовок коллекции: номер + название -->
                    <div class="collection-header">
                        <div class="collection-number">${colNumber}</div>
                        <div class="collection-title"><span>${colTitle}</span></div>
                    </div>

                    <!-- Сетка подарков (6 ячеек) -->
                    <div class="gifts-grid">
            `;

            // Если подарков меньше 6 — добиваем пустыми ячейками
            const totalCells = 6;
            for (let i = 0; i < totalCells; i++) {
                if (i < colGifts.length) {
                    const gift = colGifts[i];
                    const [, imgSrc, giftName, giftNumber] = gift;
                    html += `
                        <div class="gift-item">
                            <img src="${imgSrc}" alt="${giftName}" class="gift-image">
                            <div class="gift-name">${giftName}</div>
                            <div class="gift-number">#${giftNumber}</div>
                        </div>
                    `;
                } else {
                    // Пустая ячейка
                    html += `
                        <div class="gift-item empty">
                            <span>🔲</span>
                        </div>
                    `;
                }
            }

            html += `
                    </div>
                </div>
            `;
        });

        app.innerHTML = html;
    }

    // ================================================================
    // 4. ЗАПУСК
    // ================================================================
    document.addEventListener('DOMContentLoaded', renderCollections);
</script>