article { display: grid; grid-template-columns: repeat(3, 453px); text-align: start;margin: 40px 0 60px 0; gap: 60px 40px; position: relative;}
article .article-image { width: 453px; height: 272px; display: block; }
article .article-image img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
article .article-image img.no-thumbnail{object-fit: contain; border: 1px solid #eee;}
article .article-info { padding: 20px 0; }
article .article-info h6 { font-size: 18px; line-height: 26px; position: relative; display: inline-block; }
article .article-info h6:after { 
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    width: 0;
    transition: 0.5s;
    height: 1px;
    background: #111;
}
article .article-box:hover h6:after { width: 100%; }
article .article-info span { display: block; margin-top: 6px; font-size: 18px; line-height: 26px; color: #767676; }

@media (max-width:1440px) {
    article { grid-template-columns: repeat(3, 27rem);margin: 2.5rem 0 3.75rem 0; gap: 3.75rem 2.5rem;}
    
    article .article-image { width: 27rem; height: 17rem;  }
    article .article-info { padding: 1.25rem 0; }
    article .article-info h6 { font-size: 1.125rem; line-height: 1.625rem; }
    article .article-info span {  margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.625rem;}




}
@media (max-width: 1024px){
    article { margin-top: 1.5rem; grid-template-columns: repeat(1, 100%); gap: 1.5rem; }
    article .article-image { width: 100%; height: 12.3125rem; }
    article .article-info { padding: 1.25rem 0; }
    article .article-info h6,
    article .article-info span { font-size: 1.125rem; line-height: 1.625rem; }
    article .article-info span { margin-top: 0.375rem; }    
}