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

.article.banner
  .bg+.content
    min-height: 240px
    --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: $fs-h1
    color: var(--text-banner)
  .bottom
    padding: 1.5rem 1rem
  h1
    line-height: 1.2
    margin: 0
  
  
  

// 动画配置
.article.banner
  .bg+.content
    trans1 all
    --blur-bg: rgba(black, 0.1)
    --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)
set_darkmode()
  .article.banner
    --button-hover-bg: rgba(white, 0.15)

if hexo-config('style.darkmode') == 'auto'
  @media (prefers-color-scheme: dark)
    set_darkmode()
if hexo-config('style.darkmode') == 'always'
  set_darkmode()