<style>
/* ===========================
FD301 / FD302 — сетка карточек
=========================== */

/* Десктоп (≥961px) */
@media (min-width: 961px) {
/* 1) Поля контейнера ленты.
Сейчас по 20px слева и справа.
Если нужно больше воздуха по краям — увеличь 40px (например, до 60px). */
.t-feed__container {
max-width: calc(100% - 40px);
margin: 0 auto;
}

/* --- ВЫБЕРИ ОДИН ВАРИАНТ НИЖЕ --- */

/* === 2 колонки ===
Каждая карточка занимает половину ширины.
Отступы между карточками — по 20px с каждой стороны. */
.t-feed__post {
max-width: calc(50% - 40px);
margin: 0 20px;
}

/* === 3 колонки ===
Оставь активным этот блок, если хочешь три карточки в ряд.
Отступы между карточками — по 10px. */
/* .t-feed__post {
max-width: calc(33.333% - 20px);
margin: 0 10px;
} */

/* === 4 колонки ===
Для четырёх карточек в ряд. Отступы — по 10px. */
/* .t-feed__post {
max-width: calc(25% - 20px);
margin: 0 10px;
} */
}
}
</style>

<style>
/* ===========================
Второе изображение при наведении
=========================== */

.uc-hoverimg {
position: relative;
overflow: hidden;
border-radius: 10px; /* скругление углов карточки */
}

/* два слоя: обычное и ховер-изображение */
.uc-hoverimg::before,
.uc-hoverimg::after {
content: "";
position: absolute;
inset: 0;
background: var(--base-bg) center/cover no-repeat;
border-radius: inherit;
transition: opacity .6s ease, transform .6s ease;
}

/* второе изображение скрыто по умолчанию */
.uc-hoverimg::after {
background: var(--hover-bg) center/cover no-repeat;
opacity: 0;
}

/* при наведении плавно меняем прозрачность и чуть увеличиваем */
.t-feed__post:hover .uc-hoverimg::before { opacity: 0; transform: scale(1.03); }
.t-feed__post:hover .uc-hoverimg::after { opacity: 1; transform: scale(1.03); }
</style>

<script>
/* ===========================
Подключение второго изображения
=========================== */

(function(){
/* ссылки на изображения, которые должны появляться при наведении
порядок соответствует карточкам в ленте */
const hoverImages = [
'https://site.ru/img/hover-1.jpg',
'https://site.ru/img/hover-2.jpg',
'https://site.ru/img/hover-3.jpg'
];

const cards = document.querySelectorAll('.t-feed__post');
cards.forEach((card, i) => {
const wrap = card.querySelector('.t-feed__post-imgwrapper');
if (!wrap) return;

const base = getComputedStyle(wrap).backgroundImage;
wrap.classList.add('uc-hoverimg');
wrap.style.setProperty('--base-bg', base);

const hover = hoverImages[i];
if (hover) wrap.style.setProperty('--hover-bg', `url(${hover})`);
});
})();
</script>

<style>
/* ===========================
Внешний вид кастомных фильтров
=========================== */

.btn-all, .btn-first, .btn-second, .btn-third {
opacity: 0.5; /* неактивные — полупрозрачные */
transition: opacity 0.3s ease, background 0.3s ease, color 0.3s ease;
cursor: pointer;
}

.btn-all:hover,
.btn-first:hover,
.btn-second:hover,
.btn-third:hover {
opacity: 1; /* при наведении становятся видимыми */
}

.is-active {
opacity: 1; /* активная кнопка всегда видима */
/* background: #FF6122; /* цвет активного фильтра при необходимости*/
/* color: #080808; /* цвет текста активного фильтра при необходимости */
}

/* Скрываем стандартные фильтры */
.t-feed__parts-switch-wrapper {
display: none;
}
</style>

<script>
/* ===========================
Кастомная фильтрация через Zero-блок
=========================== */

document.addEventListener('DOMContentLoaded', () => {
/* соответствие между классами твоих кнопок и названиями разделов в FD */
const map = {
'.btn-all': 'Все',
'.btn-first': 'Сайт под ключ',
'.btn-second': 'Вёрстка',
'.btn-third': 'Дизайн'
/* если фильтров больше, просто добавь следующие строки по этому же принципу:
'.btn-fourth': 'Название раздела в FD',
'.btn-fifth': 'Название раздела в FD',
и так далее */
};

/* активируем первую кнопку при загрузке */
document.querySelector('.btn-all')?.classList.add('is-active');

Object.entries(map).forEach(([selector, label]) => {
document.querySelectorAll(selector).forEach(btn => {
btn.addEventListener('click', () => {
/* ищем соответствующую кнопку фильтра в FD и кликаем по ней */
const fdBtn = [...document.querySelectorAll('.t-feed__parts-switch-btn')]
.find(el => el.textContent.trim() === label);
fdBtn?.click();

/* снимаем актив со всех кнопок и ставим на выбранную */
document.querySelectorAll(Object.keys(map).join(',')).forEach(el =>
el.classList.remove('is-active')
);
btn.classList.add('is-active');
});
});
});
});
</script>