nextjs-template/src/shared/styles/media.css

/* Ширина — Mobile First (min-width), кроме --xs (max-width) */
@custom-media --xs  (max-width: 35.9375rem);
@custom-media --sm  (min-width: 36rem);
@custom-media --md  (min-width: 48rem);
@custom-media --lg  (min-width: 62rem);
@custom-media --xl  (min-width: 75rem);
@custom-media --2xl (min-width: 88rem);
@custom-media --3xl (min-width: 120rem);

/* Высота — min-height */
@custom-media --h-xs  (min-height: 41.6875rem);
@custom-media --h-sm  (min-height: 43.875rem);
@custom-media --h-md  (min-height: 50.625rem);
@custom-media --h-lg  (min-height: 56.25rem);
@custom-media --h-xl  (min-height: 62.5rem);
@custom-media --h-2xl (min-height: 68.75rem);
@custom-media --h-3xl (min-height: 75rem);