<!-- Делаем аккордеон Тильда в 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>