@use '../../configs/design.site' as design

.on-desktop-only
  @media only screen and (min-width: 0px) and (max-width: design.$desktop)
    display: none

  @media only screen and (min-width: design.$desktop)
    display: block

.on-tablet-only
  @media only screen and (min-width: 0px) and (max-width: design.$tablet)
    display: none

  @media only screen and (min-width: design.$tablet) and (max-width: design.$desktop)
    display: block

  @media only screen and (min-width: design.$desktop)
    display: none

.on-mobile-only
  @media only screen and (max-width: design.$mobile)
    display: block

  @media only screen and (min-width: design.$tablet)
    display: none

.on-desktop-tablet-only
  @media only screen and (min-width: 0px) and (max-width: design.$tablet)
    display: none

  @media only screen and (min-width: design.$tablet)
    display: block

.on-desktop-mobile-only
  @media only screen and (min-width: 0px) and (max-width: design.$mobile)
    display: block

  @media only screen and (min-width: design.$mobile) and (max-width: design.$desktop)
    display: none

  @media only screen and (min-width: design.$desktop)
    display: block

.on-tablet-mobile-only
  @media only screen and (min-width: 0px) and (max-width: design.$desktop)
    display: block

  @media only screen and (min-width: design.$desktop)
    display: none