.pagination {
	margin: 3rem auto;
	width: fit-content;
}

.pagination ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.pagination li a,
.pagination li span {
	font: var(--l-bold);
	color: var(--black);
	padding: 0.625rem 1.125rem;
	border: 1px solid var(--color-primary);
}

.pagination li a:hover,
.pagination li a:focus {
	border-width: 1px;
}

.pagination img {
	width: 1.25rem;
}

.pagination > span {
	display: flex;
	align-items: center;
}

.pagination .control-prev,
.pagination .control-next {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.5rem;
	border: 1px solid var(--color-primary);
}

.pagination .control-prev {
	padding-top: 0.825rem;
	padding-right: 0.75rem;
	padding-bottom: 0.825rem;
	padding-left: 0.825rem;
}

.pagination .control-next {
	padding-top: 0.825rem;
	padding-right: 0.825rem;
	padding-bottom: 0.825rem;
	padding-left: 0.75rem;
}

@media(min-width: 36em) {
	.pagination .control-prev,
	.pagination .control-next {
		padding-top: 0.625rem;
		padding-right: 1rem;
		padding-bottom:  0.5rem;
		padding-left: 0.825rem;
	}
}

.pagination .control-prev:focus,
.pagination .control-next:focus {
	border-color: var(--button-outline--secondary);
}

.pagination .label {
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	position: absolute;
	border: none;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

@media(min-width: 36em) {
	.pagination .label {
		margin: auto;
		padding: 0;
		width: auto;
		height: auto;
		position: static;
		overflow: initial;
		clip: initial;
		white-space: initial;
	}
}