/*How to override the default wordpress gutenberg break point for columns (two for sure) when they are set to stack on mobile at 1023px and less (gutenbery default is 780px, which is often too small). Put a class like "overrideWordPressBreakpoint1023pixels" on the outermost "ColumnS" wrapper gutenberg block (under the "advanced tab," where classes can go). Then add this to css:*/


@media (max-width: 1023px){
	.overrideWordPressBreakpoint1023pixels.wp-block-columns{
		flex-wrap: wrap!important;
	}
	.overrideWordPressBreakpoint1023pixels .wp-block-column{
		flex-basis: 100% !important;
	}
	.overrideWordPressBreakpoint1023pixels img{
		width: 100%;
		/*if you have an image you want to insure is 100% of the width of the container*/
	}
}


/* OR, if you have say, four columns across and need them to go down to two columns at a certain point, then incljude the following in your css and put the class "goDownToTwoColumnsAt1024" [or whatever your break point is] on the parent columns element in WordPress admin: (Note that the columnms will still go down to one column at the natural Gutenberg break point of if think 781px*/

@media (max-width: 1024px){
	.goDownToTwoColumnsAt1024.wp-block-columns{
		flex-wrap: wrap !important;
	}
	.goDownToTwoColumnsAt1024 .wp-block-column{
		flex-basis: 48% !important
	}
	.goDownToTwoColumnsAt1024 .wp-block-column img{
		width: 100%;
	}
}