.news-cards { margin: 20px 0; }
.news-cards .center { height: 280px; overflow: hidden;}

.news-cards .arrow { position: absolute; visibility: none; display: flex; align-items: center; justify-content: center; top: 112px; width: 14px; height: 14px; padding: 14px; border-radius: 12px; background-color: var(--text-opposite); font-family: siteicons; font-size: 15px; font-style: normal; cursor: pointer; opacity: 0; transition: .2s ease-out; box-shadow: 0px 3px 12px -5px rgba(0,0,0,.3); z-index: 2;}
.news-cards .arrow.arrow-left:before { content: '\0048'; }
.news-cards .arrow.arrow-right:before { content: '\0049'; }
.news-cards .arrow.arrow-left { left: -10px; }
.news-cards .arrow.arrow-right { right: -10px; }
.news-cards:hover .arrow { visibility: visible; opacity: 1; }
.news-cards:hover .arrow.arrow-left { left: 0; }
.news-cards:hover .arrow.arrow-right { right: 0; }

.news-cards .card-wrap { position: relative; gap: 30px; justify-items: center; display: flex; min-width: 100%; height: 280px; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.news-cards .card-wrap .card { position: relative; width: 180px; height: 280px; border-radius: 10px; flex-shrink: 0; user-select: none; }
.news-cards .card-wrap .card a { user-drag: none; -webkit-user-drag: none; }

.news-cards .card-wrap .card video {position: relative; border-radius: 8px 8px 0 0; z-index:2;}
.news-cards .card-wrap .card video .video {position: absolute; display: none; top: 0; left: 0; width: 180px; height: 180px; border-radius: 8px 8px 0 0; z-index: 1;}
.news-cards .card-wrap .card video .video.active,
.news-cards .card-wrap .card:hover video .video { display: block; user-drag: none; -webkit-user-drag: none; user-select: none; }

.news-cards .card-wrap .card picture {position: absolute; top: 0; left: 0; width: 180px;height: 180px;border-radius: 8px 8px 0 0;overflow: hidden;background-image: url('https://scrapride.com/images/background/no-photo.webp');background-repeat: no-repeat;background-position: center center;background-size: 100% 100%;}
.news-cards .card-wrap .card picture .photo {height: 100%;width: 100%;position: absolute;display: block;transition: .2s ease-out;object-fit: cover; user-drag: none; -webkit-user-drag: none; user-select: none; text-align: center; font-size: 12px; }
.news-cards .card-wrap .card:hover picture .photo { transform: scale(1.05);}
.news-cards .card-wrap .card .bottom-wrap {position: absolute;width: 100%;top: 193px;font-size: 12px;overflow: hidden;}
.news-cards .card-wrap .card .title {position: relative;width: 100%;font-size: 16px;font-weight: bold;overflow: hidden;display: -webkit-box;text-overflow: ellipsis;line-clamp: 2;-webkit-line-clamp: 2;-webkit-box-orient: vertical;line-height: 1.2em;max-height: 2.4em;}
.news-cards .card-wrap .card .title:hover,
.news-cards .card-wrap .card .title:hover b { color: var(--text-blue); }
.news-cards .card-wrap .card .tags {position: relative;margin: 5px 0;width: 100%;overflow-x: auto;overflow-y: hidden;-ms-overflow-style: none;scrollbar-width: none;-webkit-overflow-scrolling: touch;}
.news-cards .card-wrap .card .tags .tags-wrap { position: relative; height: 100%; min-width: 100%; display: flex; gap: 8px; }
.news-cards .card-wrap .card .tags .tag {text-decoration: underline;color: var(--text-gray);flex-shrink: 0;}
.news-cards .card-wrap .card .tags .tag:hover {color: var(--text-blue);}
.news-cards .card-wrap .card .tags .tag:before { content: '#'; }
.news-cards .card-wrap .card .date { position: relative; display: block; width: 100%; margin: 5px 0; color: var(--text-gray); }
.news-cards .card-wrap .card-empty { width: 160px; height: 268px; margin-right: 10px; display: flex; justify-content: center; align-items: center; border-radius: 10px;flex-shrink: 0;  background-color: var(--bg); outline: 2px solid var(--text); outline-offset: -2px; color: var(--text); cursor: pointer;user-drag: none; -webkit-user-drag: none; user-select: none; }
.news-cards .card-wrap .card-empty:hover { color: var(--text-blue); outline-color: var(--text-blue); }
.news-cards .card-wrap .card-empty:before { content: '\0041'; margin-right: 8px; font-size: 14px; font-style: normal; font-family: siteicons; }

@media screen and (max-width: 1150px) {
.news-cards .center { padding: 0; width: 100%; }
.news-cards .card-wrap { gap: 14px; }
.news-cards .card:first-child { margin-left: 20px; }
.news-cards .card:last-child { margin-right: 20px; }
}