.article.banner
  --text-banner: var(--text)
  background: var(--block)
  margin: 0
  height: unset

.article.banner
  .bg+.content
    min-height: 224px
    --text-banner: white
    --button-hover-bg: rgba(white, 0.25)

.article.banner .content
  .top
    align-items: flex-start
    margin: 1rem 'calc(1rem - 4px)'
  .title
    font-size: $fsh1
    color: var(--text-banner)
  h1
    line-height: 1.2
    margin: 0.25rem 0

.l_body .article.banner .content .bottom.only-title .title
  padding: 0.75rem 0

.l_body[text-indent] .article.banner .content .bottom.only-title
  justify-content: center


// 动画配置
.article.banner
  .bg+.content
    trans1 all
    --blur-bg: rgba(black, 0)
    --blur-px: 0px
    --blur-sat: 100%
    background: var(--blur-bg)
    @supports ((-webkit-backdrop-filter:blur(var(--blur-px))) or (backdrop-filter:blur(var(--blur-px))))
      background: var(--blur-bg)
      backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
      -webkit-backdrop-filter: saturate(var(--blur-sat)) blur(var(--blur-px))
  &:hover
    .bg+.content
      --blur-bg: rgba(black, 0.1)
      --blur-px: 20px
      --blur-sat: 150%

.article.banner
  --button-hover-bg: rgba(black, 0.05)
  ondark()
    --button-hover-bg: rgba(white, 0.15)
  :root[data-theme="dark"] &
    ondark()
  :root:not([data-theme]) &
    @media (prefers-color-scheme: dark)
      ondark()