.l_body
  display: grid
  grid-template-columns: 1fr minmax(200px,var(--width-main)) 1fr
  grid-gap: var(--gap-margin)
  margin: auto
  font-size: var(--fsp)

.l_body aside
  z-index: 8
  width: var(--width-sidebar)
  flex-shrink: 0
  position: sticky
  position: -webkit-sticky
  top: 8px

.l_body .l_right
  height: 100%
  .widgets
    height: 100%
    overflow visible

// 平板布局
@media screen and (max-width: $device-laptop)
  .laptop-only
    display: block !important
  .l_body
    .l_right
      position: fixed
      height: calc(100% - 8px * 2)
      transform: translateX(320px)
      transition: transform .38s ease-out
      margin: 0
      right: 8px
      box-shadow: $boxshadow-card-float
      z-index: 10
      background: var(--site-bg)
      overflow: scroll
  .l_body[rightbar]
    .l_right
      transform: translateX(0px)
    .main-mask
      opacity 1
      pointer-events: inherit

// 手机布局
@media screen and (max-width: $device-mobile-max)
  .mobile-only
    display: block !important
  .l_body
    padding: 0
    display: block
    .l_left
      position: fixed
      transform: translateX(-320px)
      transition: transform .38s ease-out
      margin: 0
      left: 8px
      box-shadow: $boxshadow-card-float
      z-index: 10
    .l_main
      max-width: 100%
  .l_body[leftbar]
    .l_left
      transform: translateX(0px)
    .main-mask
      opacity 1
      pointer-events: inherit


.main-mask
  position: fixed
  pointer-events: none
  top: 0
  left: 0
  width: 100%
  height: 100%
  background: rgba(black, 0.2)
  z-index: 9
  opacity 0
  trans1 opacity