请教下CSS中scroll-snap-type的用法

我想实现

| 特斯拉中国 - Tesla https://www.tesla.cn/%E8%BF%99%E4%B8%AA%E7%BD%91%E7%AB%99%E4%B8%AD%EF%BC%8C%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E6%BB%9A%E5%8A%A8%E8%87%AA%E5%8A%A8%E8%B4%B4%E9%A1%B6%E9%83%A8%E7%9A%84%E6%95%88%E6%9E%9C%EF%BC%8C%E5%9C%A8%E7%BD%91%E4%B8%8A%E6%89%BE%E5%88%B0%E4%BA%86scroll-snap-type%E5%92%8Cscroll-snap-align%E7%9A%84%E7%94%A8%E6%B3%95%EF%BC%8C%E4%BD%86%E4%B8%8D%E8%B5%B7%E6%95%88%E6%9E%9C%EF%BC%8C%E8%AF%B7%E9%97%AE%E6%98%AF%E5%93%AA%E9%87%8C%E5%87%BA%E9%94%99%E4%BA%86

<div class="main">
  <div class="left-description">
  <div class="title">
    title 
    <span style=color:#DB3157>
    title
    </span>
    </div>
  <div class="content">
     <span>
    1
    </span>
  </div>
  </div>
<div class="image">
  <img src="https://z3.ax1x.com/2021/11/03/IEnW90.png">
</div> 
</div>

.main{ 
  display:flex;
  scroll-snap-type:y mandatory;
  overflow:scroll;
  width:100%;
  height:100vh;
  margin: 0px;
} 
.title{
  color:white;
  font-size:40px;
  font-weight:800;
  font-family:Airal;
  padding-top:180px;
  padding-left:180px;
  padding-bottom:30px;
}
.content{
  color:grey;
  padding-left:180px;
  font-size:24px;
}
.image{ float:right;
  width:40%;
  height:100vh;
} 

.left-description{
  background-color:black;
  float:left;
  width:59.7%;
  height:100vh;
  scroll-snap-align:start;
}

.main样式scroll-snap-type:x mandatory;
.image样式加scroll-snap-align: start

而且多加几个项，要不都没出滚动条，效果不明显

<style>.main{ 
  display:flex;
  scroll-snap-type:x mandatory;
  overflow:scroll;
  width:100%;
  height:100vh;
  margin: 0px;
} 
.title{
  color:white;
  font-size:40px;
  font-weight:800;
  font-family:Airal;
  padding-top:180px;
  padding-left:180px;
  padding-bottom:30px;
}
.content{
  color:grey;
  padding-left:180px;
  font-size:24px;
}
    .image {
        float: right;
        width: 40%;
        height: 100vh;
        scroll-snap-align: start;
    } 
.left-description{
  background-color:black;
  float:left;
  width:59.7%;
  height:100vh;
  scroll-snap-align:start;
}
 </style>
<div class="main">
    <div class="left-description">
        <div class="title">
            title
            <span style=color:#DB3157>
                title
            </span>
        </div>
        <div class="content">
            <span>
                1
            </span>
        </div>
    </div>
    <div class="image">
        <img src="https://z3.ax1x.com/2021/11/03/IEnW90.png">
    </div>
    <div class="image">
        <img src="https://z3.ax1x.com/2021/11/03/IEnW90.png">
    </div>
    <div class="image">
        <img src="https://z3.ax1x.com/2021/11/03/IEnW90.png">
    </div>
    <div class="image">
        <img src="https://z3.ax1x.com/2021/11/03/IEnW90.png">
    </div>
</div>

第一次提问没搞懂操作，网站是特斯拉的首页

纯电动车、太阳能和清洁能源 | 特斯拉中国 Tesla 致力于通过电动汽车、太阳能产品以及适用于家庭和企业的综合型可再生能源解决方案，加速世界向可持续能源的转变。 https://www.tesla.cn/