.article { row-gap: 2rem;}.article__container { display: flex; flex-direction: column; gap: 2rem;}.article__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center;}.article__image-wrapper { width: 100%; height: 400px; background: var(--placeholder-bg); border-radius: 1.5rem; overflow: hidden;}.article__header { display: flex; flex-direction: column; gap: 1rem;}.article__header-meta { display: flex; align-items: center; gap: 1.5rem; color: var(--description);}.article__header-meta__category, .article__header-meta__comment, .article__header-meta__date { display: flex; align-items: center; gap: 0.5rem;}.article__description { display: flex; flex-direction: column; gap: 1rem; font-size: 14px; line-height: 20px;}.article__description > * { margin-bottom: 0;}.article__description ul { display: flex; flex-direction: column; gap: 0.25rem; list-style-type: square;}.article__description ul li::marker { color: var(--main);}.article-recent__grid { display: flex; flex-direction: column; gap: 1.5rem;}@media (max-width: 992px) { .article-recent__grid { gap: 0.75rem; }}.article-recent__item { display: flex; flex-direction: row; align-items: center; gap: 1rem;}.article-recent__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; cursor: pointer;}.article-recent__image-wrapper { flex-shrink: 0; width: 150px; height: 150px; aspect-ratio: 1/1; background: var(--placeholder-bg); border-radius: 1.5rem; overflow: hidden;}.article-recent__content { display: flex; flex-direction: column; gap: 1rem;}.article-recent__meta { display: flex; align-items: center; gap: 0.5rem; color: var(--description);}.article-recent__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; font-weight: 400; line-height: 20px; color: var(--heading); text-decoration: none; transition: color 0.3s ease;}.article-recent__title:hover, .article-recent__title:active, .article-recent__title:focus { color: var(--main);}.article-recent__description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; color: var(--description);}