.search_form {margin-top:5px;}
ul.content_list {padding-left:15px;}
ul.content_list li {margin:5px 0;}
.image_left {float:left; margin:0 20px 20px 0; max-width:400px;}
.image_right {float:right; margin:0 0 20px 20px; max-width:400px;}
.w100 {width:100%;margin:20px 0;}
.content_flex {display:flex; gap:20px; flex-direction:row; justify-content: center; flex-wrap: wrap; margin: 20px 0; text-align:center;}

.products_grid {
	display:flex;
	gap:20px;
	margin:20px 0;
	padding:0;
}

div.news-detail ul.products_grid {
	margin:20px 0;
	padding:0;
	overflow-x:scroll;
}

.products_grid li {
	border-radius:8px;
	width:180px; 
	height:180px;
	min-width:160px;
	min-height:160px;
	margin:0;
	padding:0;
	position:relative;
	list-style:none;
	border:1px solid rgb(0 0 0 / .2);
	overflow:hidden;
}

.products_grid  a {
	width:100%;
	height:100%;
	display:block;
	text-decoration:none;
}


.products_grid img {
	object-fit: cover;
	object-position: center;
	width:100%;
	height:100%;
}

a.products_grid__name {
	position:absolute;
	left:0;
	right:0;
	bottom: 0;
    height: auto;
    padding: 10px 0;
    text-align: center;
    background: rgba(255, 255, 255, .4);
}

.attention_block {}

.grid-3 {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 20px;
	text-align: center;
}

.grid-3 p {
	font-size: 15px;
}

/* Контейнер для списка (скрываем вылет за границы, если нужно) */
.list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	gap: 10px;
}

.list-item {
	margin-bottom: 10px;
	padding: 15px;
	background-color: #f0f0f0;
	border-radius: 8px;

	/* Начальное состояние: скрыты и сдвинуты вправо */
	opacity: 0;
	transform: translateX(50px);

	/* Настраиваем плавность перехода */
	transition: opacity 0.4s cubic-bezier(0.25, 1, 0.5, 1),
		transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);

	/* Задержка для каждого пункта */
	transition-delay: calc(var(--i) * 0.08s);
}

/* Этот класс добавит JavaScript, когда список появится в зоне видимости */
.list.visible .list-item {
	opacity: 1;
	transform: translateX(0);
}

@keyframes slideIn {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@media screen and (max-width: 900px) {
	.grid-3 {
		grid-template-columns: 1fr;
		text-align: left;
	}
}

@media screen and (max-width: 700px) {	
.image_left {float:none; margin:20px auto; max-width:300px;height:auto; display: block;}
.image_right {float:none; margin:20px auto; max-width:300px;height:auto; display: block;}
}