@use './breakpoint' as view

.fullscreen
  position: fixed
  top: 0
  left: 0
  width: 100vw
  height: 100vh
  object-fit: cover
  z-index: -1
  opacity: 1

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

  @media only screen and (max-width: view.$tablet)
    display: none

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

.on-tablet-only
  @media only screen and (max-width: view.$desktop)
    display: none

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

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

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

  @media only screen and (max-width: view.$tablet)
    display: none

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

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

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

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

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

  @media only screen and (max-width: view.$tablet)
    display: none

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

.on-tablet-mobile-only
  @media only screen and (max-width: view.$desktop)
    display: none

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

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