#
# MEDIA QUERY TOKENS
# Use these tokens to set media query width ranges.
#

props:
  media_query_xs:
    value: "(min-width: 375px)"
  media_query_s:
    value: "(min-width: 480px)"
  media_query_m:
    value: "(min-width: 768px)"
  media_query_m--new:
    value: "(min-width: 672px)"
  media_query_m_landscape--new:
    value: "(min-width: 736px)"
  media_query_l:
    value: "(min-width: 1024px)"
  media_query_l--new:
    value: "(min-width: 992px)"
  media_query_l_landscape--new:
    value: "(min-width: 992px)"
  media_query_xl:
    value: "(min-width: 1200px)"
  media_query_xl--new:
    value: "(min-width: 1104px)"
  media_query_xxl:
    value: "(min-width: 1440px)"

  media_query_xs_down:
    value: "(max-width: 374px)"
  media_query_s_down:
    value: "(max-width: 479px)"
  media_query_m_down:
    value: "(max-width: 767px)"
  media_query_m_down--new:
    value: "(max-width: 671px)"
  media_query_m_landscape_down--new:
    value: "(max-width: 735px)"
  media_query_l_down:
    value: "(max-width: 1023px)"
  media_query_l_down--new:
    value: "(max-width: 991px)"
  media_query_l_landscape_down--new:
    value: "(max-width: 991px)"
  media_query_xl_down:
    value: "(max-width: 1199px)"
  media_query_xl_down--new:
    value: "(max-width: 1103px)"
  media_query_xxl_down:
    value: "(max-width: 1439px)"

global:
  type: ...
  category: media-query