.pre-product {
  height: 130px;
  background: #23211b;
}
@media (max-width: 900px) {
  .pre-product {
    height: 90px;
  }
}
.breadcrums {
  margin-top: 20px;
  margin-bottom: 20px;
  color: #ccc;
}
.breadcrums a {
  color: var(--main-color);
  text-decoration: none;
}
.articles-section {
  padding-bottom: 100px;
}
.project-cards {
  margin-bottom: 30px;
  width: 31%;
  display: inline-block;
  vertical-align: top;
  border-radius: 5px;
  height: 350px;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 700px) {
  .project-cards {
    width: 48%;
    height: 300px;
  }
}
@media (max-width: 550px) {
  .project-cards {
    width: 100%;
    height: 250px;
  }
}
.project-cards:before {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  content: "";
  opacity: 1;
  transition: 0.5s;
}

.project-cards:hover:before {
  opacity: 0.7;
}
.project-cards .name {

  position: absolute;
  z-index: 3;
  font-family: "Bold";
  font-size: 24px;
	left:20px;
	max-width: calc(100% - 40px);
	top:80px;
	color:#fff;
	line-height: 40px;

}
.project-cards .pic {
  position: absolute;
  z-index: 1;
  left: 0;
  width: 100%;
  height: 100%;
  top: 0;
  background-size: cover;
  background-position: center;
}

.artdate {
  position: relative;
  z-index: 3;
  font-size: 20px;
  text-align: left;
  margin-top: 20px;
}

@media (max-width: 700px) {
  .project-cards:before {
    opacity: 1;
  }
	.project-cards .name {


		top:20px;
;
	
	}

}


.articles>a>img{
  width:100%;
  object-fit: cover;
  height: 100%;
}