.main .intro .product {
  width: 100%;
  max-width: calc(60vw - 5vw);
  /*padding-right: 5vw;*/
  color: black;
  display: flex;
  flex-wrap: wrap;
  height:100%;
  overflow: hidden;
}

.main .intro .product .item {
  position: relative;
  height: fit-content;
  display: flex;
  flex-direction: column;
  padding: 24px;
  flex: 0 0 50%;
  max-width: 334px;
  min-width: 250px;
  min-height: 250px;
  height:50%;
}
@media screen and (max-width:1210px){
  .main .intro .product .item{
    max-width: 50%;
    min-height: 450px;
  }
}
@media screen and (max-width:1840px){
  .main .intro .product .item:nth-child(5),.main .intro .product .item:nth-child(6){
    display:none;
  }
}
@media screen and (max-width: 1600px){
  .main .intro .about .text{
    width:75%;
  }
}

.main .intro .product .item a {
  text-align: start;
  color: black;
  transition: all 0.5s;
}
.main .intro .product .item a.name {
  padding: 0 0 8px 0;
}
.main .intro .product .item a.img {
  min-width: 250px;
  min-height: 250px;
  flex:1;
  /*width: 80%;*/
  margin: 0 auto;
  padding-bottom: 20px;
}
.main .intro .product .item a.img img {
  width: 100%;
}
.main .intro .product .item a.button {
  background: #F5F5F5;
  border-radius: 50px 0px 0px 0px;
  position: absolute;
  width: 100px;
  height: 50px;
  right: 0;
  bottom: 0;
}
.main .intro .product .item a.button::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 40%;
  transform: translate(40%, -50%);
  background: url(./images/Arrow.svg);
  height: 24px;
  width: 24px;
  opacity: 0;
  transition:all .3s ease-in-out;
}
@media screen and (max-width: 768px){
  .main .intro .product .item a.button::after{
    opacity: 1;
  }
}
.main .intro .product .item .price {
  font-weight: 500;
}
.main .intro .product .item .price .dash {
  width: 1px;
  height: 100%;
  border: 1px solid #c6c6c6;
  margin: 0 12px;
}
.main .intro .product .item:hover a.button {
  background: #A1887E;
}
.main .intro .product .item:hover a.button::after{
  opacity: 1;
}
.main .intro .product .item:hover a.button:hover {
  background: #836C63;
}
.main .intro .product .item:hover a.button:focus {
  background: #AD9388;
}

@media screen and (max-width: 1210px) {
  .main .intro .product {
    padding-right: 24px;
  }
  .main .intro .product{
    max-width:100%;
  }

}
@media screen and (max-width: 767px) {
  .main .intro .product {
    padding-right: 24px;

  }

  .main .intro .product .item {
    flex: 0 0 100%;
    max-width: 500px;
    margin:0 auto;
    min-height:unset;
  }
  .main .intro .product .item a.button {
    background: #A1887E;
  }
}
@media screen and (max-width:767px){
  .main .intro .product .item{
    height:350px;
  }
}