Move breakpoints to breakpoint for easier @use

src/pg/core/_core-colour-samples.scss

@@ -1,4 +1,4 @@
-@use "../pg/patterns/core/breakpoints/breakpoints";
+@use "../pg/patterns/core/breakpoint/breakpoint";
 
 @mixin core-colour-samples {	
 
@@ -38,14 +38,14 @@
 		gap: 1rem;
 		margin-bottom: 1rem;
 
-		@include breakpoints.break(-lg) {
+		@include breakpoint.break(-lg) {
 			display: grid;
 			grid-template-columns: repeat(2, 1fr);
 			max-width: 100%;
 			width: 100%;
 		}
 
-		@include breakpoints.break(-sm) {
+		@include breakpoint.break(-sm) {
 			grid-template-columns: auto;
 			width: 100%;
 			max-width: 100%;
@@ -69,7 +69,7 @@
 			width: 20rem;
 			max-width: 318px;
 
-			@include breakpoints.break(-lg) {
+			@include breakpoint.break(-lg) {
 				width: 100%;
 				max-width: 100%;
 			}

src/pg/patterns/core/breakpoint/_breakpoint.scss

@@ -4,7 +4,7 @@
 // default breakpoints match bootstrap 5 breakpoints.
 $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ) !default;
 
-@mixin breakpoint-debug {
+@mixin debug {
 	body::before, body::after {
 		background-color: #555;	
 		color: white;