How to change the breakpoint on a Gutenberg navigation block

While creating a WordPress Full Site Editing theme, you may need to change the breakpoint of the Gutenberg navigation block.

The following CSS will achieve just this.

body .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: block !important;
}
body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none !important;
}

@media (min-width: 884px) {
	body .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;;
	}
	body .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
}

Change the @media (min-width: 884px) to whatever breakpoint you require.