/* TODO valutare rinomina dei breakpoint in nomi semantici (es. dsk/lap/tab/mob,
   vedi scripts/build-margin-padding-css.mjs) per coerenza con la scala `sizes`,
   che usa la stessa nomenclatura xs/sm/md/lg/xl e genera ambiguità nelle
   utility responsive. Non banale: i tier attuali (xxlarge/xlarge/large/medium/
   small, con varianti -only/-down) sono numerosi e in parte sovrapposti (es.
   "large" = "small desktop") e non si riducono in modo pulito a poche
   categorie semantiche; inoltre il nome è usato in molti file (grid.css,
   display.css, visibility.css, text.css, sf-macro.css, json-table, oltre ai
   file margin-padding-*-media.css) ed è parte di un template pensato per
   essere personalizzato dall'utente: rinominarlo qui non aggiorna le copie
   già in uso nei progetti che lo hanno importato. */

/*
90rem    : 1440px xxlarge (large desktop)
80rem    : 1280px xlarge (desktop)
64rem    : 1024px large (small desktop)
47.5rem  : 760px  medium (tablet)
25rem    : 400px  small (phone)

tablet alt:
53.75rem : 860px  medium (tablet)
*/

/* @custom-media --media-xxlarge-viewport-up (width >= 90rem); */
@custom-media --media-xlarge-viewport-up (width >= 80rem);
@custom-media --media-large-viewport-up (width >= 64rem);
@custom-media --media-medium-viewport-up (width >= 47.5rem);
@custom-media --media-small-viewport-up (width >= 25rem);

@custom-media --media-xxlarge-viewport-only (width >= 90rem);
@custom-media --media-xlarge-viewport-only (64rem < width <= 80rem);
@custom-media --media-large-viewport-only (64rem < width <= 80rem);
@custom-media --media-medium-viewport-only (47.5rem < width <= 64rem);
@custom-media --media-small-viewport-only (width <= 47.5rem);

@custom-media --media-xxlarge-viewport-down (max-width: 90rem);
@custom-media --media-xlarge-viewport-down (max-width: 80rem);
@custom-media --media-large-viewport-down (max-width: 64rem);
@custom-media --media-medium-viewport-down (max-width: 47.5rem);
/* @custom-media --media-small-viewport-down (max-width: 25rem); */