Делаем аккордеон Тильда в 2-4 колонки автоскейл

<!-- Делаем аккордеон Тильда в 2 колонки автоскейл | youx.agency -->
<!-- https://youx.agency/delaem-akkordeon-tilda-avtoskejl -->

<style>

/* Медиазапрос для экранов с шириной 1024px и выше (для компьютеров) */
@media (min-width: 1024px) {

    /* Контейнер, внутри которого будут элементы */
    .t-container {
        max-width: 100% !important;    /* Устанавливаем максимальную ширину на 100% */
        display: flex;                 /* Используем flexbox для размещения элементов в ряд */
        flex-wrap: wrap;               /* Разрешаем перенос элементов на новую строку, если нужно */
        justify-content: flex-start;   /* Выравнивание элементов по левому краю */
        padding: 0 1.5%;               /* Отступы по бокам по 1.5% */
    }

    /* Убираем левый отступ у элементов */
    .t-col {
        margin-left: 0px;
    }

    /* Каждый элемент будет занимать 47% ширины контейнера для 2 в ряду */
    .t-col_12 {
        flex: 0 1 47%;                 /* Устанавливаем, чтобы элементы занимали 47% ширины */
        box-sizing: border-box;        /* Чтобы padding и border не выходили за пределы ширины */
        margin-right: 3%;              /* Отступ справа между элементами */
    }

    /* Убираем правый отступ у последнего элемента */
    .t-container .t-col_12:last-child {
        margin-right: 0;             /* Убираем правый отступ у последнего элемента */
    }

}



</style>

<!-- Делаем аккордеон Тильда в 2 колонки автоскейл | youx.agency -->
<!-- https://youx.agency/delaem-akkordeon-tilda-avtoskejl -->

<style>

/* Контейнер, внутри которого будут элементы */
.t-container {
    max-width: 99% !important;  /* Устанавливаем максимальную ширину */
    display: flex;              /* Используем flexbox для размещения элементов в ряд */
    flex-wrap: wrap;            /* Разрешаем перенос элементов на новую строку, если нужно */
    gap: 20px;                  /* Отступ между колонками */
}

/* Каждый элемент будет занимать 33.33% ширины контейнера на ПК */
.t-col_12 {
    max-width: 33.33%;          /* Устанавливаем максимальную ширину элемента в 33.33% */
    flex: 1;                    /* Гарантируем, что элементы будут растягиваться по ширине */
    box-sizing: border-box;     /* Чтобы padding и border не выходили за пределы ширины */
}

/* Убираем отступ у последнего элемента */
.t-container .t-col_12:last-child {
    margin-right: 0;            /* Убираем правый отступ у последнего элемента */
}

/* Убираем отступы слева для .t-col */
.t-col {
    margin-left: 0px;
}

/* Медиазапрос для мобильных устройств */
@media (max-width: 1024px) {
    /* Стили для мобильных устройств */
    .t-container {
        flex-direction: column;  /* Элементы выстраиваются в столбик */
        gap: 10px;               /* Уменьшаем отступ между элементами */
    }

    .t-col_12 {
        max-width: 100%;         /* Устанавливаем ширину элемента в 100% */
    }
}

</style>