.content-part12{
  width: 100%;
  height: 800px;
  /* border: 2px solid red; */
  position: relative;
  padding-inline: 0;
}

.content-part12 > span{
  position: absolute;
  top: 100px;
  left: 100px;
  font-size: 4rem;
  font-weight: 500;
  white-space: pre-line;
}
.content-part12-main{
  width: 100%;
  height: 100%;
  /* border: 4px solid green; */
  display: flex;
}
.content-part12-main > div{
  height: 100%;
  width: 100%;
  /* border: 2px solid red; */
  border-right: 1px solid rgb(229, 229, 229);
  display: flex;
  align-items: flex-end;
}

.content-part12-main > div:last-child{
  border-right: none;
}


.content-part12-main > div > img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  filter: grayscale(100%);
  transition: height 0.3s ease-in-out,filter 0.3s ease-in-out;
}

.content-part12-main > div:nth-child(2) > img{
  height: 220px;

}

.content-part12-main > div:nth-child(4) > img{
  height: 360px;
}
.content-part12-main > div:nth-child(5) > img{
  filter: none;
}

.content-part12-main > div:nth-child(6) > img{
  height: 280px;
}

/* 交互处理 */

@media (hover:hover){
  .content-part12-main > div:nth-child(1) > img:hover{
    height: 350px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(2) > img:hover{
    height: 330px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(3) > img:hover{
    height: 330px;
    filter: none;
  }
  .content-part12-main > div:nth-child(4) > img:hover{
    height: 320px;
    filter: none;
  }
  .content-part12-main > div:nth-child(5) > img:hover{
    height: 260px;
  
  }
  
  .content-part12-main > div:nth-child(6) > img:hover{
    height: 220px;
  
  }
}

@media screen and (max-width: 768px) {
  .content-part12{
    height: 600px;
  }
  .content-part12 > span{
    font-size: 3rem;
    top: 30px;
    left: 30px;
  }
  .content-part12-main > div > img{

    height: 260px;
  }
  

  .content-part12-main > div:nth-child(2) > img{
    height: 220px;
  
  }
  
  .content-part12-main > div:nth-child(4) > img{
    height: 300px;
  }
  .content-part12-main > div:nth-child(5) > img{
    height: 260px;
  }
  .content-part12-main > div:nth-child(6) > img{
    height: 220px;
  }
  
}


@media (hover:hover) and (max-width: 768px){
  .content-part12-main > div:nth-child(1) > img:hover{
    height: 290px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(2) > img:hover{
    height: 300px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(3) > img:hover{
    height: 330px;
    filter: none;
  }
  .content-part12-main > div:nth-child(4) > img:hover{
    height: 320px;
    filter: none;
  }
  .content-part12-main > div:nth-child(5) > img:hover{
    height: 280px;
  
  }
  
  .content-part12-main > div:nth-child(6) > img:hover{
    height: 250px;
    filter: none;
  }
}

@media screen and (max-width: 480px){
  .content-part12{
    height: 400px;
  }
  .content-part12 > span{
    font-size: 2rem;
    top: 30px;
    left: 30px;
  }

  .content-part12-main > div > img{

    height: 260px;
  }
  
  .content-part12-main > div:nth-child(1) > img{
    height: 160px;
  
  }

  .content-part12-main > div:nth-child(2) > img{
    height: 180px;
  
  }
  .content-part12-main > div:nth-child(3) > img{
    height: 200px;
  
  }
  
  .content-part12-main > div:nth-child(4) > img{
    height: 220px;
  }
  .content-part12-main > div:nth-child(5) > img{
    height: 180px;
  }
  .content-part12-main > div:nth-child(6) > img{
    height: 160px;
  }
  
}


@media (hover:hover) and (max-width: 480px){
  .content-part12-main > div:nth-child(1) > img:hover{
    height: 200px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(2) > img:hover{
    height: 220px;
    filter: none;
  }
  
  .content-part12-main > div:nth-child(3) > img:hover{
    height: 180px;
    filter: none;
  }
  .content-part12-main > div:nth-child(4) > img:hover{
    height: 250px;
    filter: none;
  }
  .content-part12-main > div:nth-child(5) > img:hover{
    height: 230px;
  
  }
  
  .content-part12-main > div:nth-child(6) > img:hover{
    height: 250px;
    filter: none;
  }
}