Как добавить дополнительные колонки с иконками для блока TX16N в Tilda

<script>
document.addEventListener("DOMContentLoaded", function() {
    (function () {
        const accordBlock = document.querySelector('.uc-accord-desc');
        if (!accordBlock) return;

        // Конфигурация колонок
        const columnsConfig = [
            { type: 'empty' }, // Первая колонка всегда пустая (описание)
            { 
                title: "КОМПЛЕКТАЦИЯ 1<br>Start",
                button: { text: "Выбрать",  link: "#link-1"}
            },
            
            { 
                title: "КОМПЛЕКТАЦИЯ 2<br>Medium",
                button: {text: "Выбрать", link: "#link-2"}
            },
            
            { 
                title: "КОМПЛЕКТАЦИЯ 3<br>Maximum",
                button: {text: "Выбрать", link: "#link-3"}
            },
            
  
            
        ];


        function generateGridTemplate() {
            // Первая колонка
            let columns = ['4fr'];
            
            for (let i = 1; i < columnsConfig.length; i++) {
                columns.push('1fr');
            }
            
            return columns.join(' ');
        }

        // Функция для создания заголовка
        function createHeader() {
            let headerContent = '';
            
            columnsConfig.forEach((col, index) => {
                const colClass = `accord-header-col${index + 1}`;
                
                if (col.type === 'empty') {
                    headerContent += `<div class="${colClass}"></div>`;
                } else {
                    headerContent += `<div class="${colClass}">${col.title || ''}</div>`;
                }
            });
            
            const header = document.createElement("div");
            header.className = "accord-header t-text";
            header.innerHTML = headerContent;
            return header;
        }

        // Функция для создания футера
        function createFooter() {
            let footerContent = '';
            
            columnsConfig.forEach((col, index) => {
                const colClass = `accord-footer-col${index + 1}`;
                
                if (col.type === 'empty' || !col.button || !col.button.text) {
                    footerContent += `<div class="${colClass}"></div>`;
                } else {
                    footerContent += `<div class="${colClass}"><a href="${col.button.link}">${col.button.text}</a></div>`;
                }
            });
            
            const footer = document.createElement("div");
            footer.className = "accord-footer t-text";
            footer.innerHTML = footerContent;
            return footer;
        }


        function createBoxWrapper() {
            let boxes = '';
            for (let i = 1; i < columnsConfig.length; i++) {
                boxes += '<div class="accord-box-col"></div>';
            }
            return boxes;
        }

        function applyDynamicGrid() {
            const gridTemplate = generateGridTemplate();

            const style = document.createElement('style');
            style.textContent = `
                .accord-header, 
                .accord-footer,
                .uc-accord-desc .t585__header {
                    grid-template-columns: ${gridTemplate};
                }
                
                @media screen and (max-width: 1200px) {
                    .accord-header, 
                    .accord-footer,
                    .uc-accord-desc .t585__header {
                        grid-template-columns: 3fr ${'1fr '.repeat(columnsConfig.length - 1)};
                    }
                }
                
                @media screen and (max-width: 960px) {
                    .accord-header, 
                    .accord-footer,
                    .uc-accord-desc .t585__header {
                        grid-template-columns: 3fr ${'1fr '.repeat(columnsConfig.length - 1)};
                    }
                }
                
                @media screen and (max-width: 540px) {
                    .accord-header, 
                    .accord-footer,
                    .uc-accord-desc .t585__header {
                        grid-template-columns: 3fr ${'1fr '.repeat(columnsConfig.length - 1)};
                    }
                }
            `;
            
            const oldStyle = document.getElementById('dynamic-grid-style');
            if (oldStyle) oldStyle.remove();
            
            style.id = 'dynamic-grid-style';
            document.head.appendChild(style);
        }

        const header = createHeader();
        const footer = createFooter();
        const boxWrapper = createBoxWrapper();

        accordBlock.querySelector('.t-container').firstElementChild.prepend(header);
        accordBlock.querySelector('.t-container').lastElementChild.append(footer);
        
        applyDynamicGrid();
        
        const headers = document.querySelectorAll('.uc-accord-desc .t585__header');
        headers.forEach(header => {
            header.insertAdjacentHTML('beforeend', boxWrapper);
        });
        
        setTimeout(function() {
            const accordText = document.querySelectorAll('.uc-accord-desc .t585__text');
            accordText.forEach(item => {
                let text = item.lastElementChild.textContent;
                
                if (text && text.includes('##')) {
                    text = text.replace('##', '');
                    text = text.split('-');
                    
                    const boxCols = item.closest('.t585__wrapper').querySelectorAll('.accord-box-col');
                    
                    text.forEach((value, index) => {
                        if (index < boxCols.length) {
                            if (value === '0') {
                                boxCols[index].classList.add('cross');
                            } else if (value === '1') {
                                boxCols[index].classList.add('check');
                            }
                        }
                    });
                }
            });
        }, 500);
    })();    
});
</script>

<style>
.accord-box-col.check {
    background-image: url(https://static.tildacdn.com/tild6465-3632-4764-a465-616162373038/photo_1.svg);
}
.accord-box-col.cross {
    background-image: url(https://static.tildacdn.com/tild3230-3063-4133-b231-313831643664/Group_1_8_1.svg);
}
.uc-accord-desc span.t585__lines {
    background-image: url(https://static.tildacdn.com/tild3430-3164-4461-b465-663633356130/downarrow_121316.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.uc-accord-desc span.t585__lines svg {
    opacity:0;
}
.uc-accord-desc .t585__opened .t585__lines {
    z-index: 1;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.uc-accord-desc button.t585__trigger-button {
    padding: 20px 50px 20px 50px;
}
.uc-accord-desc span.t585__icon {
    right: auto;
    left: 0;
}
.uc-accord-desc .t585__content {
    padding-left: 50px;
    box-sizing: border-box;
    max-width: 660px;
}

.accord-header {
    font-weight: 600;
}

.accord-header, 
.accord-footer,
.uc-accord-desc .t585__header{
    display: grid;
    font-size: 12px;
    font-weight: 400;
    grid-gap: 22px;
}
.accord-header,
.accord-footer{
    margin-bottom: 10px;
}
.accord-header>div,
.accord-footer>div
{
    text-align: center;
}
.uc-accord-desc .t585__text em {
    display: none;
}
.accord-box-col {
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: center;
}

.uc-accord-desc span.t585__lines svg {
    opacity:0;
}

.uc-accord-desc .t585__opened .t585__lines {
    z-index: 1;
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.uc-accord-desc button.t585__trigger-button {
    padding: 20px 50px 20px 50px;
}

.uc-accord-desc span.t585__icon {
    right: auto;
    left: 0;
}

.uc-accord-desc .t585__content {
    padding-left: 50px;
}
.uc-accord-desc .t585 {
    overflow: auto;
}

.accord-header {
    font-weight: 600;
}

#allrecords .accord-footer a {
    color: #fcb42f;
    border: 1px solid #fcb42f;
    padding: 10px 15px;
    display: inline-block;
    margin-top: 15px;
    border-radius: 5px;
    font-size: 16px;
    transition: all 0.2s ease-in-out;
}

#allrecords .accord-footer a:hover {
    color: #fff;
    border: 1px solid #fcb42f;
    background-color:#fcb42f;
}

@media screen and (max-width: 1200px) {
.uc-accord-desc .t-container {
        max-width: 960px;
        width: 960px;
    }
    .accord-header, 
    .accord-footer,
    .uc-accord-desc .t585__header {
        display: grid;
        font-size: 11px;
        font-weight: 300;
        grid-gap: 5px;
    }
    .uc-accord-desc .t585__content{
        max-width: 500px;
    }
}
@media screen and (max-width: 960px) {

    .uc-accord-desc .t585__content {
        max-width: 370px;
    }
    .uc-accord-desc  .t-container {
        max-width: 760px;
        width: 760px;
    }
}
@media screen and (max-width: 540px) {

    .uc-accord-desc .t585__content {
        max-width: 300px;
    }
    .uc-accord-desc  .t-container {
        max-width: 650px;
        width: 650px;
    }
    
    .uc-accord-desc button.t585__trigger-button {
        padding: 20px 10px 20px 40px;
    }
    
    .uc-accord-desc .t585__icon {
        width: 14px;
        height: 14px;
    }
    
    .uc-accord-desc .t585__content {
        padding-left: 40px;
    }
    
    .uc-accord-desc .t585__circle {
        width: 30px;
        height: 30px;
    }
    
    .accord-box-col {
        background-size: 20px;
    }
    
}
</style>