.pagination-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	
	@media (max-width: 567px) {
		display: grid;
		justify-content: center;
		justify-items: center;
		text-align: center;
		grid-gap: 1rem;
	}
	
	.pagination {
		grid-gap: 0.5rem;
		.page-item.active {
			.page-link {
				background: var(--#{$variable-prefix}primary);
				border-color: var(--#{$variable-prefix}primary);
				color: var(--#{$variable-prefix}white);
			}
		}
		
		.page-item {
			&:first-child {
				.page-link {
					border-radius: 50%;
				}
			}
			&:last-child {
				.page-link {
					border-radius: 50%;
				}
			}
	
			.page-link {
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				width: 35px;
				height: 35px;
				font-size: 14px;
				color: var(--#{$variable-prefix}dark);
				background: var(--#{$variable-prefix}secondary);
				border: 1px solid var(--#{$variable-prefix}secondary);
				box-shadow: rgba(var(--#{$variable-prefix}dark), 0.05) 0px 0px 0px 1px;
				&:hover {
					background: var(--#{$variable-prefix}primary);
					color: var(--#{$variable-prefix}white);
					transition: all 500ms ease 0s;
				}
				&:focus {
					box-shadow: 0 0 0 0.25rem rgba(var(--#{$variable-prefix}primary), 75, .25);
				}
			}
		}
	}
}