How to use the @guardian/src-foundations.breakpoints.leftCol function in @guardian/src-foundations

const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`

const maxWidth = (until: number): string =>
	`@media (max-width: ${`${until - 1}px`})`

const minWidthMaxWidth = (from: number, until: number): string =>
	`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`

// e.g. from.*
const from: BreakpointMap = {
	mobileMedium: minWidth(breakpoints.mobileMedium),
	mobileLandscape: minWidth(breakpoints.mobileLandscape),
	phablet: minWidth(breakpoints.phablet),
	tablet: minWidth(breakpoints.tablet),
	desktop: minWidth(breakpoints.desktop),
	leftCol: minWidth(breakpoints.leftCol),
	wide: minWidth(breakpoints.wide),
}

// e.g. until.*
const until: BreakpointMap = {
	mobileMedium: maxWidth(breakpoints.mobileMedium),
	mobileLandscape: maxWidth(breakpoints.mobileLandscape),
	phablet: maxWidth(breakpoints.phablet),
	tablet: maxWidth(breakpoints.tablet),
	desktop: maxWidth(breakpoints.desktop),
	leftCol: maxWidth(breakpoints.leftCol),
	wide: maxWidth(breakpoints.wide),
}

// e.g. between.*.and.*
const between = {

tablet: minWidthMaxWidth(breakpoints.phablet, breakpoints.tablet),
			desktop: minWidthMaxWidth(breakpoints.phablet, breakpoints.desktop),
			leftCol: minWidthMaxWidth(breakpoints.phablet, breakpoints.leftCol),
			wide: minWidthMaxWidth(breakpoints.phablet, breakpoints.wide),
		},
	},
	tablet: {
		and: {
			desktop: minWidthMaxWidth(breakpoints.tablet, breakpoints.desktop),
			leftCol: minWidthMaxWidth(breakpoints.tablet, breakpoints.leftCol),
			wide: minWidthMaxWidth(breakpoints.tablet, breakpoints.wide),
		},
	},
	desktop: {
		and: {
			leftCol: minWidthMaxWidth(breakpoints.desktop, breakpoints.leftCol),
			wide: minWidthMaxWidth(breakpoints.desktop, breakpoints.wide),
		},
	},
	leftCol: {
		and: {
			wide: minWidthMaxWidth(breakpoints.leftCol, breakpoints.wide),
		},
	},
}

export { from, until, between, breakpoints }

tablet: {
		and: {
			desktop: minWidthMaxWidth(breakpoints.tablet, breakpoints.desktop),
			leftCol: minWidthMaxWidth(breakpoints.tablet, breakpoints.leftCol),
			wide: minWidthMaxWidth(breakpoints.tablet, breakpoints.wide),
		},
	},
	desktop: {
		and: {
			leftCol: minWidthMaxWidth(breakpoints.desktop, breakpoints.leftCol),
			wide: minWidthMaxWidth(breakpoints.desktop, breakpoints.wide),
		},
	},
	leftCol: {
		and: {
			wide: minWidthMaxWidth(breakpoints.leftCol, breakpoints.wide),
		},
	},
}

export { from, until, between, breakpoints }