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

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 = {
	mobileMedium: {

type ContainerWidths = {
	[key in GridBreakpoints]: string
}

const gridColumns: GridColumns = {
	mobile: 4,
	tablet: 12,
	desktop: 12,
	wide: 16,
}

const containerWidths: ContainerWidths = {
	mobile: "100%",
	tablet: `${breakpoints.tablet}px`,
	desktop: `${breakpoints.desktop}px`,
	wide: `${breakpoints.wide}px`,
}

const GUTTER_WIDTH = space[5]

const gridRow = css`
	@supports (display: grid) {
		display: grid;
	}

	grid-auto-columns: max-content;
	column-gap: ${GUTTER_WIDTH}px;

	/* horizontal padding is smaller on mobile */
	padding: 0 ${space[3]}px;
	${from.tablet} {
		padding: 0 ${GUTTER_WIDTH}px;

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(
				breakpoints.mobileLandscape,
				breakpoints.desktop,
			),