:root {
  --breakpoint-mobile-landscape: 320;
  --breakpoint-tablet-portrait: 425;
  --breakpoint-tablet-landscape: 768;
  --breakpoint-desktop-portrait: 1024;
  --breakpoint-desktop-landscape: 1440;

  --breakpoint-mobile-landscape-px: 320px;
  --breakpoint-tablet-portrait-px: 425px;
  --breakpoint-tablet-landscape-px: 768px;
  --breakpoint-desktop-portrait-px: 1024px;
  --breakpoint-desktop-landscape-px: 1440px;

  --breakpoint-mobile-landscape-rem: 20rem;
  --breakpoint-tablet-portrait-rem: 26.563rem;
  --breakpoint-tablet-landscape-rem: 48rem;
  --breakpoint-desktop-portrait-rem: 64rem;
  --breakpoint-desktop-landscape-rem: 90rem;
}

@custom-media --mobile-portrait (min-width: 1rem);
@custom-media --mobile-landscape (min-width: 20rem);
@custom-media --tablet-portrait (min-width: 26.563rem);
@custom-media --tablet-portrait-max (max-width: 30rem);
@custom-media --tablet-landscape (min-width: 48rem);
@custom-media --desktop-portrait (min-width: 64rem);
@custom-media --desktop-landscape (min-width: 90rem);