.r-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 32px;
	font-family: var(--font-family-base);
}
.r-pagination .page-numbers {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 58px;
	height: 44px;
	padding-inline: 12px;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1;
	color: #8a8f9c;
	text-decoration: none;
	transition: var(--animation);
}
/* slanted divider / active parallelogram */
.r-pagination .page-numbers:before {
	content: '';
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-left: 1px solid #dcdee3;
	transform: skewX(-30deg);
	transition: var(--animation);
}
.r-pagination .page-numbers.prev:before,
.r-pagination .page-numbers.current:before,
.r-pagination .page-numbers.current + .page-numbers:before {
	border-left-color: transparent;
}
.r-pagination .page-numbers.prev,
.r-pagination .page-numbers.next {
	padding-inline: 24px;
}
.r-pagination a.page-numbers:hover {
	color: #333a5b;
}
.r-pagination .page-numbers.current {
	color: #fff;
}
.r-pagination .page-numbers.current:before {
	background-color: #333a5b;
	left: 4px;
	right: 4px;
}
.r-pagination .page-numbers.dots {
	min-width: 40px;
}

@media (max-width: 580px) {
	.r-pagination .page-numbers {
		min-width: 40px;
		height: 38px;
		padding-inline: 8px;
		font-size: 15px;
	}
	.r-pagination .page-numbers.prev,
	.r-pagination .page-numbers.next {
		padding-inline: 12px;
	}
	.r-pagination__text {
		display: none;
	}
	.r-pagination .page-numbers.dots {
		min-width: 28px;
	}
}