.l_left
  margin: 8px 0 8px 8px
  height: 'calc(%s - 16px)' % 100vh
  border-radius: $border-card-l
  overflow: hidden
  .header
    margin: var(--gap-max) var(--gap-margin) 0
  @media screen and (min-width: 1400px)
    margin-left: auto
    margin-right: var(--gap-max)
  @media screen and (min-width: $device-mobile-max)
    >.widgets:first-child>.widget-wrapper:first-child
      margin-top: "calc(2 * %s)" % var(--gap-max)

.l_right
  margin: 0 8px 0 0
  border-radius: $border-card-l
@media screen and (min-width: 1400px)
  .l_left
    margin-left: auto
    margin-right: var(--gap-max)
  .l_right
    margin-left: var(--gap-margin)
    margin-right: auto

.l_left
  background-size: cover
  if hexo-config('style.leftbar') && hexo-config('style.leftbar.background-image')
    background-image: convert(hexo-config('style.leftbar.background-image'))
  else if hexo-config('style.leftbar') && hexo-config('style.leftbar.background')
    background: convert(hexo-config('style.leftbar.background'))
  .leftbar-container
    height: 100%
    display: flex
    flex-direction: column
    word-break: break-all
    text-align: justify
    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-px')
      --blur-px: convert(hexo-config('style.leftbar.blur-px'))
      @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
        background: var(--blur-bg)
        backdrop-filter: saturate(240%) blur(var(--blur-px))
        -webkit-backdrop-filter: saturate(240%) blur(var(--blur-px))
    if hexo-config('style.leftbar') && hexo-config('style.leftbar.blur-bg')
      --blur-bg: convert(hexo-config('style.leftbar.blur-bg'))