.sections_wrapper {
    padding: 38px 12px 0;
}

.top_block .title_block {
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    text-transform: uppercase;
    color: #001526;
}

.sections_wrapper-subtitle {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #001526;
    padding-top: 7px;
}

/* ---------- Контейнер – одна строка с прокруткой ---------- */
.sections_wrapper .items {
    display: flex;
    flex-wrap: nowrap;          /* не переносить на вторую строку */
    gap: 6px;
    overflow-x: hidden;           /* горизонтальная прокрутка */
    -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
    scrollbar-width: thin;      /* для Firefox */
}

/* Скрываем полосу прокрутки (по желанию) */
.sections_wrapper .items::-webkit-scrollbar {
    height: 6px;
}
.sections_wrapper .items::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.sections_wrapper .items::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- Каждый блок ---------- */
.sections_wrapper .item {
    position: relative;
    flex: 0 0 auto;             /* не растягивается, не сжимается */
    aspect-ratio: 381 / 449;
    border-radius: 12px;
    overflow: hidden;
    width: calc(100% / 3 - 6px); /* по умолчанию 3 колонки (с учётом gap) */
    min-width: 125px;           /* минимальная ширина для мобильных */
}

/* ---------- Остальные стили (псевдоэлементы, картинки) остаются без изменений ---------- */
.sections_wrapper .item:after,
.sections_wrapper .item:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 85%;
    content: '';
    border-radius: 12px;
    pointer-events: none;
}
.sections_wrapper .item:after {
    background: #cfcfcf;
    z-index: 0;
}
.sections_wrapper .item:before {
    background-image: url("/local/templates/home-redesign-new/assets/section-hover-bg.png");
    background-size: cover;
    opacity: 0;
    transition: .3s all;
    z-index: 1;
}
.sections_wrapper .item:hover:before {
    opacity: 1;
}
.sections_wrapper .item .img {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.sections_wrapper .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sections_wrapper .name {
    position: absolute;
    bottom: 17px;
    width: 100%;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    color: #001526;
    padding: 0 16px;
    overflow-wrap: break-word;
    z-index: 3;
}

.btn-more-catalog {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 75px
}
.btn-more-catalog a {
	background: #ed9a00;
	font-size: 28px;
	padding: 15px 50px;
    color: #001526;
    border-radius: 12px;
	font-weight: 600;
	transition: .3s all
}
.btn-more-catalog a:hover {
	opacity: .8
}

/* -------- Адаптив: меняем ширину блока -------- */

/* до 1280px – 3 колонки */
@media (max-width: 1280px) {
    .sections_wrapper .item {
        width: calc(100% / 3 - 11px);
    }
    .sections_wrapper .name {
        font-size: 10px;
        padding: 0 11px;
        bottom: 11px;
    }
    .top_block .title_block {
        font-size: 40px;
    }
    .sections_wrapper-subtitle {
        font-size: 31px;
    }
    .sections_wrapper .items {
        gap: 18px;
    }
	.btn-more-catalog {
		padding-top: 48px
	}
}

/* от 1281 до 1920 – 4 колонки */
@media (min-width: 1281px) and (max-width: 1920px) {
    .sections_wrapper {
        padding: 38px 100px 0;
    }
    .sections_wrapper .items {
        gap: 38px;
    }
    .sections_wrapper .item {
        width: calc(100% / 4 - 38px); /* 4 колонки с учётом gap */
    }
    .top_block .title_block {
        font-size: 54px;
    }
    .sections_wrapper-subtitle {
        font-size: 31px;
		padding-top: 25px
    }
    .sections_wrapper .name {
        font-size: 15px;
        padding: 38px 18px 0;
        bottom: 19px;
    }
	
}

/* выше 1920 – 6 колонок (исправлено с 7 на 6) */
@media (min-width: 1921px) {
    .sections_wrapper {
        padding: 38px 100px 0;
    }
    .sections_wrapper .items {
        gap: 38px;
    }
    .sections_wrapper .item {
        width: calc(100% / 7 - 38px);
    }
    .top_block .title_block {
        font-size: 54px;
    }
    .sections_wrapper-subtitle {
        font-size: 31px;
    }
    .sections_wrapper .name {
        font-size: 17px;
        padding: 0 18px;
        bottom: 19px;
    }
}

/* -------- дополнительные медиа для промежуточных размеров (как у вас были) -------- */
@media (max-width: 1024px) {
	.top_block .title_block {
		font-size: 16px;
	}

	.sections_wrapper-subtitle {
		font-size: 11px;
	}
}
@media (min-width: 600px) and (max-width: 1024px) {
    .sections_wrapper .name {
        font-size: 15px;
        padding: 38px 18px 0;
        bottom: 19px;
    }
}
@media (min-width: 1025px) and (max-width: 1280px) {
    .sections_wrapper .name {
        font-size: 15px;
        padding: 38px 18px 0;
        bottom: 19px;
    }
}
@media (min-width: 1601px) and (max-width: 1920px) {
    .sections_wrapper .name {
        font-size: 31px;
        padding: 0 32px;
        bottom: 32px;
    }
}
@media (max-width: 430px) {
    .sections_wrapper .name {
        font-size: 10px;
        padding: 0 11px;
        bottom: 11px;
    }
	.top_block .title_block {
		font-size: 16px;
	}

	.sections_wrapper-subtitle {
		font-size: 11px;
	}
	.btn-more-catalog {
		padding-top: 17px
	}
	.btn-more-catalog a {
		font-size: 11px;
		padding: 6px 23px;
	}
}

