.pagination {
	display: flex;
	justify-content: center;
	gap: var(--spacing-10);

	.page-numbers {
		display: flex;
		justify-content: center;
		align-items: center;
		color: var(--blue-300);
		background-color: var(--blue-50);
		border-radius: var(--btn-radius);
		cursor: pointer;
		line-height: 1;
		text-decoration: none;
		padding: var(--spacing-10);
		min-width: 50px;
		height: 50px;
		transition:
			background-color 0.3s,
			color 0.3s;

		&.dots {
			background-color: transparent;
		}

		&.current {
			background-color: var(--blue-250);
			color: var(--white);
		}
	}

	a.page-numbers:hover,
	a.page-numbers:focus {
		background-color: var(--blue-250);
		color: var(--white);
	}
}