
.news-panel-slide {
	background-color: var(--white-color);
	position: relative;
}
.news-panel-slide .news-panel-slide-title {
	margin-bottom: 32px;
	padding-right: 96px;
}
.news-panel-slide .news-panel-slide-list {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 0;
	padding: 0;
	margin: 0;
}
.news-panel-slide .news-panel-slide-item {
	min-width: 0;
	width: auto;
	flex: none;
}

.news-panel-slide .news-panel-slide-item-card {
	min-width: 0;
	max-width: none;
	padding: var(--dp);
	border-radius: var(--dp);
	overflow: hidden;
}

.news-panel-slide .news-panel-slide-item-anchor {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	z-index: 1;
	flex: 1;
}

.news-panel-slide .news-panel-slide-item-button {
	text-transform: uppercase;
	font-size: 13px;
}
	.news-panel-slide .news-panel-slide-action {
		--width: 40px;
		--height: 40px;
		width: var(--width);
		height: var(--height);
		position: absolute;
		top: 0;
		border-width: 1px;
		border-radius: 4px;
		background-color: #e9ecef;
	}
		.news-panel-slide .news-panel-slide-action:focus,
		.news-panel-slide .news-panel-slide-action:hover {
			outline: none;
			background-color: #dee2e6;
		}
.news-panel-slide .news-panel-slide-action-prev {
	right: calc(var(--width) + calc(var(--dp) * 2));
}
.news-panel-slide .news-panel-slide-action-next {
	right: 0;
}

/* Colors */
/* Green */
.news-panel-slide .green .news-panel-slide-item-anchor:focus::before,
.news-panel-slide .green .news-panel-slide-item-anchor:hover::before {
	background-color: var(--pale-green-color);
	opacity: 0.5;
}

/* Blue */
.news-panel-slide .blue .news-panel-slide-item-anchor:focus::before,
.news-panel-slide .blue .news-panel-slide-item-anchor:hover::before {
	background-color: var(--pale-blue-color);
	opacity: 0.5;
}

/* Orange */
.news-panel-slide .orange .news-panel-slide-item-anchor:focus::before,
.news-panel-slide .orange .news-panel-slide-item-anchor:hover::before {
	background-color: var(--pale-orange-color);
	opacity: 0.5;
}

@media (max-width: 1024px) {
	.news-panel-slide {
		padding-left: 32px;
		padding-right: 32px;
	}

	.news-panel-slide .news-panel-slide-action-next {
		right: 32px;
	}
	.news-panel-slide .news-panel-slide-action-prev {
		right: calc(var(--width) + calc(var(--dp) * 6));
	}
}