:root {
	--c-bg: #ffffff;
	--c-text: #20222c;
	--c-muted: #727896;
	--c-border: #ced3ea;
	--c-brand: #50519b;
	--c-brand-ink: #ffffff;
}
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	justify-content: flex-end;
}

.pagination__btn {
	appearance: none;
	border: 1px solid var(--c-border);
	background: var(--c-bg);
	color: var(--c-text);
	font: inherit;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.06em;
	padding: 8px 10px;
	min-width: 38px;
	border-radius: 0;
	text-align: center;
	cursor: pointer;
	transition:
		background-color 120ms ease,
		border-color 120ms ease,
		transform 120ms ease;
}

.pagination__btn:hover {
	background: color-mix(in oklab, var(--c-bg), var(--c-brand) 4%);
	border-color: color-mix(
		in oklab,
		var(--c-border),
		var(--c-brand) 25%
	);
	color: var(--c-text);
	text-decoration: none;
}

.pagination__btn[aria-current="page"] {
	background: var(--c-brand);
	border-color: var(--c-brand);
	color: var(--c-brand-ink);
}

.pagination__btn:disabled {
	opacity: 0.55;
	cursor: default;
}

.pagination__ellipsis {
	color: var(--c-muted);
	font-size: 13px;
	padding: 0 4px;
}

@media (max-width: 640px) {
	.news__footer {
		align-items: start;
		flex-direction: column;
	}
	.pagination {
		justify-content: flex-start;
	}
}