.site-main
  position: relative
  padding-bottom: var(--gap-page)
  padding-top: var(--shell-content-top-gap)
  > .brand-header
    display: none
    margin: 2rem 1rem 1rem
    @media screen and (max-width: $device-tablet)
      display: flex !important
    .brand-wrap
      margin: 0

body > .site-background
  position fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  background-size: cover
  if $site-background-image
    background-image: url($site-background-image)
  .site-background__blur
    width: 100%
    height: 100%
    --blur-px: 0
    --blur-sat: 200%
    blur-effect()
    if hexo-config('appearance.backgrounds.page.backdrop.saturation')
      --blur-sat: convert(hexo-config('appearance.backgrounds.page.backdrop.saturation'))
    if hexo-config('appearance.backgrounds.page.backdrop.radius')
      --blur-px: convert(hexo-config('appearance.backgrounds.page.backdrop.radius'))
    if hexo-config('appearance.backgrounds.page.backdrop.overlay')
      --blur-bg: convert(hexo-config('appearance.backgrounds.page.backdrop.overlay'))