export const maxMainContentWidth = 1500;
export const paddedMainContentWidth = `min(${maxMainContentWidth}px, calc(100svw - (2 * 48px)))`;
export const contentBelowHeaderHeight = `calc(100svh - 48px)`;
export const screenSizeAtmaxMainContentWidth = 1500 + 96;
export const getScrollRange = () => window.innerHeight - 8 * 48;

// below this width, the feature highlight animations break down
export const BELOW_W_1280 = `max-width: 1279px`;

// below this width, the laptop animation breaks down
export const BELOW_W_1024 = `max-width: 1023px`;
export const NOT_BELOW_W_1024 = `min-width: 1024px`;

// below this width, the "what is this" section breaks down
export const BELOW_W_768 = `max-width: 767px`;
export const NOT_BELOW_W_768 = `min-width: 768px`;

export const BELOW_W_512 = `max-width: 511px`;
export const NOT_BELOW_W_512 = `min-width: 512px`;