.title--article {
  font-size: var(--title-article);
  font-weight: 600;
  line-height: 110%;  
  color: var(--grey-700);
}

.single .title--article {
  z-index:20;
  position: relative;
  color:#FFF;
  text-align:center;
}

.title--article.active {
  color: var(--green-400);
}

.titles {
  margin-bottom: 30px;
  transition: color 500ms;
}

.titles:hover {
  color:var(--green-400) !important;
}

.articles .titles:hover {
  color:#000 !important;
}

.swiper-button-prev-hero:hover, .swiper-button-next-hero:hover {
  background-color:#1b8d5d !important;
}

.description--article {
  font-size: var(--font-500);
  color: var(--grey-400);
  margin-bottom: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; 
}

.tag {
  font-size: var(--font-400);
  display: inline-block;
  background-color: var(--green-200);
  padding: 10px 20px;
  color: var(--green-400);
  font-weight: 500;
  margin-right: 10px;
  margin-bottom: 10px;
  height: fit-content;
}

.home .hero .articles .tag {
  color: #FFFFFF;
  background-color: rgb(0 255 148 / 60%);
}

.tag:last-of-type {
  margin-bottom: 30px;
}

.date--article {
  color: var(--grey-400);
  font-size: var(--font-400);
}

.single .article .date--article {
  color: #f0f3f7;
  font-weight: 300;
  font-size: 13px;
  position: relative;
  z-index: 20;
  text-align: center;
}

.date--article span {
  display: inline-block;
  width: 5px;
  height: 5px;
  background-color: var(--grey-400);
  vertical-align: middle;
  margin: 0 10px;
}