/*
Media breakpoints. Uses https://getbootstrap.com/docs/5.2/layout/breakpoints/#media-queries

IMPORTANT NOTE: media queries do not support the use of var(), so these will not work in place
of a media query value. This is mainly for documentation and use in normal css properites.

Use with either min or max with. ex: @media (min-width: 576px)
min-width will apply to all matching sizes and above
max-width will apply to all matching sizes and below.

Phone only:
@media (min-width: 0px) AND (max-width: 767px)

Phone & Tablet:
@media (min-width: 0px) AND (max-width: 992px)

Tablet only:
@media (min-width: 768px) AND (max-width: 992px)

Desktop only:
@media (min-width: 992px)

Additionally if ever needed to heavily optimize for devices: https://developer.mozilla.org/en-US/docs/Web/CSS/env
*/

:root {
  --media-query-sm: 576px;
  --media-query-md: 768px;
  --media-query-lg: 992px;
  --media-query-xl: 1200px;
}