/* styles2.css */

/* 图片墙样式 */
.image-wall {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 40px;
	overflow-x: auto;
	/* 允许水平滚动 */
	scroll-snap-type: x mandatory;
	/* 滚动时对齐到图片 */
	scroll-behavior: smooth;
	/* 平滑滚动 */
	-webkit-overflow-scrolling: touch;
	/* 为iOS设备启用平滑滚动 */
}

.image-wall img {
	width: 32%;
	height: auto;
	/* 高度自适应 */
	object-fit: cover;
	opacity: 0;
	transform: translateX(-100%);
	transition: opacity 1s ease, transform 1s ease;
	margin-right: 10px;
	/* 图片之间的间距 */
	scroll-snap-align: start;
	/* 滚动时对齐到图片 */
	flex: 0 0 auto;
	/* 防止图片被压缩 */
}

.image-wall img.show {
	opacity: 1;
	transform: translateX(0);
}

/* 响应式设计 */
@media (max-width: 768px) {
	.image-wall img {
		width: 48%;
		/* 手机端每行显示两张图片 */
	}
}

@media (max-width: 480px) {
	.image-wall img {
		width: 80%;
		/* 手机端每行显示一张图片 */
	}
}