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

type BreakpointMap = {
	[key in Breakpoint]: string
}

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),

`@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 = {
	mobileMedium: {
		and: {
			mobileLandscape: minWidthMaxWidth(
				breakpoints.mobileMedium,
				breakpoints.mobileLandscape,
			),

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