.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;

	& .pagination__btn {
		display: inline-flex;
		width: 35px;
		height: 35px;
		justify-content: center;
		align-items: center;
		border: 1px solid transparent;
		border-radius: 100px;

		text-decoration: none;
		color: #5A5B6C;

		opacity: 0.4;

		transition: border-color .2s ease-out, opacity .2s ease-out;

		@media (hover: hover) {
			&:hover {
				border-color: #868BAB;

				opacity: 1;
			}
		}

		&.pagination__btn--active {
			border-color: #868BAB;

			opacity: 1;
		}
	}

	& a.pagination__btn {
		cursor: pointer;
	}
}