.article
  +media-breakpoint-up(md)
    padding-block: 2rem
  +media-breakpoint-down(sm)
    padding-block: 1.5rem

.article__inner
  +media-breakpoint-up(md)
    padding: 1.25rem 2rem
  +media-breakpoint-down(sm)
    padding: 1rem

.article__header
  margin-bottom: 3rem

.article__title
  line-height: 1.4
  font-weight: 700
  font-feature-settings: "palt"
  letter-spacing: .025em
  color: var(--main)
  +media-breakpoint-up(md)
    font-size: 2.5rem
  +media-breakpoint-down(sm)
    font-size: 1.625rem
  &.is-wip
    color: var(--muted-text)

.article__title-label
  background-color: var(--background-semi-shade)
  font-size: .625rem
  display: inline-block
  vertical-align: middle
  padding: .25rem .5rem
  margin-right: .25rem
  border-radius: 1rem
  margin-top: -.5em
  font-weight: 400
  color: var(--default-text)
  line-height: 1

.article__metas
  display: flex
  margin-top: .75rem
  +media-breakpoint-up(md)
    font-size: .875rem
  +media-breakpoint-down(sm)
    font-size: .8125rem

.article__meta:not(:first-child)
  margin-left: .75em

.article__published-at
  +text-block(1em 1.4)
  color: var(--semi-muted-text)

.article__author
  display: flex
  align-items: center
  +text-block(1em 1.4)
  color: var(--default-text)
  img
    +size(1.125rem)
    object-fit: cover
    margin-right: .25rem
    border-radius: 50%

.article__image
  margin-top: 1.5rem
  border-radius: 4px
  aspect-ratio: 40 / 21
  object-fit: cover
  width: 100%


.article__body
  &:not(:first-child)
    margin-top: 1.5rem
  &.a-long-text
    +media-breakpoint-up(md)
      font-size: 1rem
    +media-breakpoint-down(sm)
      font-size: .875rem

.article__actions
  margin-top: 2rem
  border-top: dashed 2px var(--border)
  padding-top: 1rem
  ul
    display: flex
    justify-content: center
    align-items: center
    gap: 1rem
  li
    flex: 1
    max-width: 15rem

.article__header-row
  &:not(:first-child)
    margin-top: .75rem

.article__ad
  font-size: .875rem
