.trending-carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* Override the base .trending-grid grid layout with a scroll track */
.trending-carousel .trending-grid {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	flex: 1;
	/* Hide scrollbar since navigation is via the buttons */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.trending-carousel .trending-grid::-webkit-scrollbar {
	display: none;
}

.trending-carousel .trending-item {
	flex: 0 0 auto;
	width: 210px;
	scroll-snap-align: start;
	margin-right: 24px;
}

.trending-carousel .trending-item:last-child {
	margin-right: 0;
}

.trending-carousel-btn {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: none;
	background: rgba(255, 255, 255, 0.15);
	color: #000000;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
}

.trending-carousel-btn:hover:not(:disabled) {
	background: rgba(255, 255, 255, 0.3);
}

.trending-carousel-btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.trending-carousel.no-overflow .trending-carousel-btn {
	display: none;
}

/* ---- Tablet ---- */

@media (max-width: 1024px) {
	.trending-carousel .trending-item {
		width: 160px;
		margin-right: 18px;
	}
}

/* ---- Mobile ---- */

@media (max-width: 600px) {
	.trending-carousel {
		gap: 8px;
	}

	.trending-carousel .trending-item {
		width: 140px;
		margin-right: 16px;
	}

	.trending-carousel-btn {
		width: 36px;
		height: 36px;
		font-size: 20px;
	}
}