.blog-carousel__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-l);
	margin-bottom: var(--space-l);
}

.blog-carousel__nav {
	display: flex;
	gap: var(--space-2xs);
	flex-shrink: 0;
}

.blog-carousel__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: var(--radius-full);
	background-color: var(--color-background-inverse);
	color: var(--color-text-inverse);
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.blog-carousel__arrow:hover {
	opacity: 0.85;
}

.blog-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.blog-carousel__arrow svg {
	width: 1.2rem;
	height: 1.2rem;
}

.blog-carousel__viewport {
	width: 100%;
	overflow: hidden;
	cursor: grab;
}

.blog-carousel__viewport.is-dragging {
	cursor: grabbing;
}

.blog-carousel__track {
	display: flex;
	gap: var(--space-m);
	width: max-content;
	padding-left: max(var(--space-m), calc((100vw - min(92vw, var(--container-max))) / 2));
	padding-right: var(--space-m);
	will-change: transform;
}

.blog-carousel__item {
	flex: 0 0 clamp(16rem, 30vw, 22rem);
}

.blog-carousel__item .blog-card {
	height: 100%;
}