section#coding{

}
section#coding .wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1440px;
}
section#coding .wrap h2{

}
section#coding .wrap >p{

}
section#coding .wrap >p span{

  font-weight: bold;
}
section h2{
  font-weight: 600;
}
section#coding .wrap ul{
  display: grid;
  grid-template-columns: repeat(4, auto);
  grid-template-rows: auto auto;
  width: 100%;
}
section#coding .wrap ul li{
  position: relative;
}
section#coding .wrap ul li:nth-child(3){
  grid-column: 2;
  grid-row: 1 / span 3;
}
section#coding .wrap ul li::after{
  content: "";
  display: block;
  width: 100%;
  height: 260px;
  background: no-repeat center /cover;
}
section#coding .wrap ul li:nth-child(1)::after{
  background-image: url(../img/parpot.png);
}
section#coding .wrap ul li:nth-child(2)::after{
  background: url(../img/blender.jpg) no-repeat bottom /cover;
}
section#coding .wrap ul li:nth-child(3)::after{
  background-image: url(../img/ks.PNG);
  height: 100%;
}
section#coding .wrap ul li:nth-child(4)::after{
  background-image: url(../img/HBbag.png);
}
section#coding .wrap ul li:nth-child(5)::after{
  background-image: url(../img/ak.jpg);
}
section#coding .wrap ul li:nth-child(6)::after{
  background-image: url(../img/accu.png);
}
section#coding .wrap ul li:nth-child(7)::after{
  background-image: url(../img/iriver.png);
}
section#coding .wrap ul li >h3{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 0;
} 
section#coding .wrap ul li a{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  text-align: center;
  opacity: 0;
  z-index: 1;
  background-color: white;
  transition: 1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-align: start;
}
section#coding .wrap ul li:nth-child(1) a{
  background-color: #CDE0C5;
}
section#coding .wrap ul li:nth-child(2) a{
  background-color: #FAEDD9;
}
section#coding .wrap ul li:nth-child(3) a{
  background-color: #E3DBD0;
}
section#coding .wrap ul li:nth-child(4) a{
  background-color: #CAB295;
}
section#coding .wrap ul li:nth-child(5) a{
  background-color: #D2CDC8;
}
section#coding .wrap ul li:nth-child(6) a{
  background-color: #EEE89B;
}
section#coding .wrap ul li:nth-child(7) a{
  background-color: #E5E5E5;
}
section#coding .wrap ul li:hover a{
  opacity: 1;
}
section#coding .wrap ul li a h3{
  line-height: 2;
  width: 50%;
  border-bottom: 1px solid black;
}
section#coding .wrap ul li a p{
  
  font-size: 18px;
  width: 50%;
  margin-top: 7px;
}