//-		DS2 core (c) 2024 Alexander McIlwraith 
//-		Core licensed under CC BY-SA 4.0 

extends ../../../core/_master-pattern
block content
	
	+h(0)
	p Breakpoints enable responsive mobile design.

	+h(1)
	p Use breakpoints when designing for different screen sizes. 

	p The breakpoints SCSS mixin included implements media queries to allow for the change of the layout and design based on pre-defined screen sizes. 

	+h(2)
	p This pattern is only available for SCSS breakpoints. The  mixin is avai

	p When using this, use the default break points as they are set to the same as the Bootstrap framework. The grid for the design system at large break point has been widened to accompdate 3 colour cards across. 

	tabset#breakpoints
		div(tab="scss")
			+h(3)
			pre.language-sass.
				@use "scss/core/breakpoint/breakpoint";
				@include breapoint.break([breakpoint]) {
					// css here
				}
			+h(4)
			pre.language-sass
				include _breakpoint.scss