.user-group
  padding: 1rem
  &:not(:first-child)
    border-top: solid 1px var(--border-tint)

.user-group__header
  display: flex
  gap: .5rem
  +media-breakpoint-up(md)
    justify-content: space-between
  +media-breakpoint-down(sm)
    flex-direction: column

.user-group__title
  +media-breakpoint-up(md)
    font-size: 1rem
  +media-breakpoint-down(sm)
    font-size: 1rem

.user-group__title-link
  text-decoration: none
  color: var(--main-text)
  display: flex
  gap: .5rem
  +media-breakpoint-up(md)
    align-items: flex-end
  +media-breakpoint-down(sm)
    flex-direction: column
  .user-group__title.is-inline &
    flex-direction: row
    align-items: flex-end

.user-group__title-label
  display: block
  font-weight: 600
  .user-group__title-link:hover &
    text-decoration: underline

.user-group__title-icon
  &.is-first
    color: var(--gold)
  &.is-second
    color: var(--silver)
  &.is-third
    color: var(--bronze)

.user-group__date
  font-size: .75rem
  font-weight: 400
  color: var(--muted-text)

.user-group__count
  font-size: .75rem
  font-weight: 400
  color: var(--muted-text)

.user-group__counts
  +media-breakpoint-up(md)
    margin-top: -.5rem
    flex: 1
    max-width: 29rem
  .card-counts__item
    width: 3.5rem
    color: var(--default-text)
