.news {
	--gap: 32px;
	--per-view: 3;
	position: relative;
	padding: 96px 0 72px;
	overflow: hidden;
}

.news__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.news__inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 40px;
	max-width: 1870px;
	margin: 0 auto;
	padding: 0 64px;
}

.news__track {
	display: flex;
	gap: var(--gap);
	margin: 0;
	padding: 20px 8px 20px;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 8px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.news__track::-webkit-scrollbar {
	display: none;
}

.news__slide {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
	min-width: 0;
	scroll-snap-align: start;
}

.news-card {
	display: block;
	height: 312px;
	border-radius: 32px;
	border: 6px solid #FFF;
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.24);
	color: var(--primary-black);
	transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s cubic-bezier(.2, .7, .2, 1);
}

.news-card:hover {
	transform: translateY(-8px);
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.30), 0px 4px 7px 3px rgba(0, 0, 0, 0.15);
}

.news-card__inner {
	height: 100%;
	border-radius: 26px;
	overflow: hidden;
	background: linear-gradient(180deg, #E2E2E2 0%, #F3F3F3 100%);
}

.news-card__media {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--grey-40);
}

.news-card__media img {
	display: block;
	width: 100%;
	height: 205px;
	object-fit: cover;
}

.news-card__date {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 5px 12px;
	border-radius: 999px;
	border: 2px solid #FFF;
	background: #EDEDED;
	box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12);
	color: #454545;
	font-family: 'HelveticaNeue-Medium';
	font-size: 12px;
	line-height: 120%;
}

.news-card__body {
	padding: 16px;
}

.news-card__heading {
	margin: 0 0 6px;
	font-family: 'HelveticaNeue-Medium', sans-serif;
	font-size: 28px;
	font-weight: 500;
	line-height: 32px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .3s ease;
	letter-spacing: 0.7px;
}

.news-card:hover .news-card__heading {
	color: #AA0909;
}

.news-card__text {
	margin: 0;
	font-family: 'HelveticaNeue-Medium', sans-serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: #676767;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news__arrow {
	position: relative;
	width: 85px;
	height: 85px;
	padding: 0;
	background: url(../assets/arrowback.png) center / contain no-repeat;
	filter: drop-shadow(0px 2px 6px #00000026);
	cursor: pointer;
	transition: transform .3s ease;
}

.news__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 20px;
	background-image: url(../assets/arrow_drop.svg);
	transform: translate(-50%, -50%) rotate(270deg);
	transition: border-color .3s ease;
}

.news__arrow--prev::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

.news__arrow:hover::before {
	border-color: #AA0909;
}

.news__arrow:focus-visible,
.news-card:focus-visible,
.news__dot:focus-visible {
	outline: 2px solid #AA0909;
	outline-offset: 4px;
}

.news__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

.news__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border-radius: 999px;
	background: #DEDEDE;
	box-shadow: 0 -1.5px 1.2px 0 rgba(255, 255, 255, 0.80) inset, 0 0.5px 1px 0 rgba(0, 0, 0, 0.30) inset;
	cursor: pointer;
	transition: width .3s ease, background .3s ease, box-shadow .3s ease;
}

.news__dot:not([aria-current="true"]):hover {
	background: #898989;
	box-shadow: 0 -1.5px 1.2px 0 rgba(255, 255, 255, 0.32) inset, 0 0.5px 1px 0 rgba(0, 0, 0, 0.30) inset;
}

.news__dot[aria-current="true"] {
	width: 40px;
	border-radius: 100px;
	background: #080808;
	box-shadow: none;
}

.news.is-static .news__arrow,
.news.is-static .news__dots {
	visibility: hidden;
}

body.dark .news-card {
	border-color: #242424;
	background: #242424;
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
}

body.dark .news-card:hover {
	box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.30), 0px 4px 7px 3px rgba(0, 0, 0, 0.15);
}

body.dark .news-card__inner {
	background: linear-gradient(180deg, #141414 0%, #1E1E1E 100%), linear-gradient(180deg, #1E1E1E 0%, #171717 100%), #1E1E1E;
}

body.dark .news-card__heading {
	background: linear-gradient(180deg, #AF934C 0%, #DEBC66 50%, #AF934C 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

body.dark .news-card__text {
	color: #676767;
}

body.dark .news-card__date {
	border-color: #292929;
	background: #171717;
	color: #DEDEDE;
}

body.dark .news__arrow {
	background-image: url(../assets/arrow_b.png);
}

body.dark .news__arrow::before {
    filter: brightness(0) saturate(100%) invert(98%) sepia(10%) saturate(373%) hue-rotate(220deg) brightness(117%) contrast(81%);
}

body.dark .news__arrow:hover::before {
	border-color: #BD9C49;
}

body.dark .news__dot {
	background: #454545;
	box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.32) inset;
}

body.dark .news__dot[aria-current="true"] {
	border-radius: 100px;
	background: linear-gradient(180deg, #AF934C 0%, #DEBC66 50%, #AF934C 100%), #080808;
	box-shadow: none;
}

@media (max-width: 1440px) {
	.news {
		--gap: 24px;
		padding: 72px 0 56px;
	}

	.news__inner {
		gap: 24px;
		padding: 0 32px;
	}

	.news-card__heading {
		font-size: 22px;
		line-height: 28px;
	}

	.news {
		--per-view: 2;
	}
}

@media (max-width: 900px) {
	.news__arrow {
		width: 70px;
		height: 70px;
	}

	.news__inner {
		gap: 16px;
		padding: 0 16px;
	}

	.news {
		--gap: 16px;
		padding: 48px 0 40px;
	}

	.news__inner {
		display: block;
		padding: 0;
	}

	.news__arrow {
		display: none;
	}

	.news__track {
		padding: 16px 16px 16px;
		scroll-padding-inline: 16px;
	}

	.news__slide {
		flex-basis: 86%;
	}

	.news-card {
		border-radius: 22px;
		padding: 5px;
	}

	.news-card__inner {
		border-radius: 17px;
	}

	.news-card__body {
		padding: 14px 16px 18px;
	}

	.news-card__heading {
		font-size: 20px;
		line-height: 26px;
	}

	.news-card__text {
		font-size: 14px;
	}

	.news-card__date {
		top: 12px;
		left: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.news-card {
		transition: none;
	}
}