.news-card {
background-color: #f6f8f9;
border: 1px solid #e2e8ea;
border-radius: 8px;
padding: 24px 20px;
display: grid;
grid-template-areas: "category date" "title title";
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
align-items: center;
flex: 1;
gap: 20px 16px;
transition: 0.15ms opacity;
&:hover {
opacity: 0.8;
}
@media screen and (max-width: 1024px) {
min-width: 315px;
}
& .news-card__category {
grid-area: category;
display: flex;
align-items: center;
justify-content: center;
color: #0085ee;
font-size: 0.6875rem;
line-height: 1.6;
font-weight: 400;
height: fit-content;
padding-inline: 6px;
border-radius: 2px;
border: 1px solid #0085ee;
}
& .news-card__date {
grid-area: date;
display: inline-block;
width: fit-content;
margin-left: auto;
color: #737373;
font-size: 0.875rem;
font-weight: 400;
}
& .news-card__title {
grid-area: title;
font-size: 1rem;
line-height: 1.6;
font-weight: 400;
}
}