.widget-wrap#github-user .widget-body
  display: flex
  flex-direction: column
  align-items: center
  background: var(--card)
  border-radius: $border-card
  padding: 1rem
  margin: 'calc(%s + 1.25rem)' % var(--gap-p) 0

.widget-wrap#github-user .widget-body .avatar
  display: block
  border-radius: 100%
  max-width: 80%
  margin-top: 1.5rem

.widget-wrap#github-user .widget-body .username
  font-weight: 900
  font-size: $fs-h2
  margin-top: 1.5rem
  color: var(--text-p0)

.widget-wrap#github-user .widget-body .follow 
  font-weight: 500
  border-radius: 64px
  padding: 0.5rem 1rem
  background: $color-theme
  color: var(--card)
  font-size: 1rem
  align-self: stretch
  text-align: center
  line-height: 1.5
  display: flex
  align-items: center
  justify-content: center
  trans1: background
  svg
    margin-right: 4px
  &:hover
    background: $color-hover

  

.widget-wrap#github-user .widget-body .buttons
  margin: 0.75rem 0
  align-self: stretch
  display: grid
  grid-gap: 2px
  grid-template-columns: repeat(auto-fill, "calc((100% - 2 * %s) / 3)" % 2px)

.widget-wrap#github-user .widget-body .btn
  display: flex 
  flex-direction: column
  align-items: center
  color: inherit
  border: 1px solid transparent
  border-radius: 4px
  padding: 0.25rem 0
  trans1: background
  &:hover
    background: var(--block)


.widget-wrap#github-user .widget-body .buttons .btn .title
  font-size: 1rem
  font-weight: 700


.widget-wrap#github-user .widget-body .buttons .btn .desc
  font-size: $fs-12
  color: var(--text-p3)
  font-weight: 500