/* ==================================================

	Breakpoints

	Landing page is desktop-first (mobile layered on via max-width); the apply page is mobile-first.

	Unless device-based, breakpoints should be weirdly specific so they're easy to find and replace site-wide (e.g. prefer 1077px over 1080px).

	Mobile Figma frames are 350x700 with a 37px status bar on top: subtract 37 from every mobile y. The cropped PNGs in /design-layouts/ already have it removed.

	@related breakpoints

================================================== */

:root {

	/* non-functional: CSS vars can't be used in media queries. Here to be greppable + visible in DevTools. */
	--break-container-ref: 1077px; /* one past --container-w + (--gutter-page * 2) = 1076 */
	--break-mobile-ref:    1076px; /* max-width complement of the above */
	--break-sm-ref:         768px;

	/* mobile composition is pinned to the 350px design column: posters and scoops are placed by px down a feed whose height doesn't scale with width */
	--mobile-col-w: 350px;

}