.grid-item.article-thumb > a{
  display:block;
  border-radius: 10px;
  border: 1px solid #000;
  background-color:#fff;
  width: 100%;
  overflow:hidden;
  position:relative;
}

.grid-item.article-thumb > a > .article-infos{
  width: 100%;
}

.grid-item.article-thumb > a > figure{
  height:0;
  padding-bottom: 40%;
  position:relative;
}

.grid-item.article-thumb .article-info{
  padding: 15px 25px;
}

.grid-item.article-thumb .article-info > *{
  border-bottom: 1px solid #000;
  padding: .5rem 0;
}

.grid-item.article-thumb .article-info > *:last-child{
  border: none;
}

.grid-item.article-thumb .article-info h2{
  font-weight: bold;
}

.article-thumb  a figure::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 9;
  mix-blend-mode: luminosity;
  background-color: var(--color-light);
  opacity: .7;
  -webkit-transition: opacity .3s ease;
  transition: opacity .2s ease;
}

.article-thumb  a:hover figure::after{
  opacity:0;
}

.article-icons{
  display:flex;
}

.article-icons img{
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.article-icons span{
  display:block;
  margin:auto 0;
}

@media screen and (min-width: 768px){
  .grid-item.article-thumb { 
    width: calc(100% - 25px);
  }
  .grid-item.article-thumb .article-info h2{
    font-size: 1.5rem;
  }

  .grid-item.article-thumb > a{
    height: 0;
    padding-bottom:40%;
    display:flex;
  }

  .grid-item.article-thumb > a > *{
    width:50%;
  }

  .grid-item.article-thumb .article-info > p,
  .grid-item.article-thumb .article-info span{
    font-size: 1.25rem;
  }

  .grid-item.article-thumb .text{
    font-size:0.75rem;
  }
}

@media screen and (min-width: 1200px){
  .grid-item.article-thumb { 
    width: calc(50% - 25px);
  }
}