html+css 制作小米商城主体内容的商品展示

 这个是效果图，源代码放下面了，欢迎一起交流讨论

这里是html

<!-- 主体部分 -->
		<div class="home-main">
			<div class="container w">
				<!-- 过度栏 -->
				<div class="home-banner">
					<a href="#"><img src="./img/过度栏.webp" alt=""></a>
				</div>
				<!-- 产品列表 -->
				<div class="home-brick-box w">
					<!-- 标题 -->
					<div class="box-hd">
						<h2>手机</h2>
						<div class="more">
							<a href="#">查看更多<i class="iconfont"></i></a>
						</div>
					</div>
					<!-- 详细介绍 -->
					<div class="box-clearfix">
						<div class="row">
							<div class="span4">
								<ul class="brick-promo-list clearfix">
									<li>
										<a href="#"><img src="./img/12s ultra.webp" alt="">
										</a>
									</li>
								</ul>
							</div>
							<div class="span16">
								<ul class="brick-list clearfix">
									<li>
										<a href="#" class="brick-item">
											<div class="figure">
												<img src="./img/12s pro ultra.webp" alt="">
											</div>
											<h3 class="title">Xiaomi 12S Ultra</h3>
											<p class="desc">这真徕卡｜专业徕卡影像</p>
											<p class="price"><span&