.widget-wrap#github-user .widget-body display: flex flex-direction: column align-items: center background: var(--card) border-radius: $border-card padding: 2rem 1rem 1rem margin: 'calc(%s + 1.25rem)' % var(--gap-p) 0 .widget-wrap#github-user .widget-body .avatar display: block border-radius: 100% margin: auto max-width: 80% @media screen and (max-width: $device-tablet) max-width: 50% .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