const group-padding-y = 0.75rem
const group-padding-x = 0.75rem

.groups
	display grid
	grid-gap calc(content-padding / 2)
	// grid-template-columns repeat(auto-fill, min(100%, 520px))
	// justify-content center

.group
	horizontal
	ui-element
	position relative
	// width 100%
	// max-width 520px
	padding group-padding-y group-padding-x
	color text-color

	:hover
		color theme-white
		background-color theme-black
		text-shadow none

.group-image
	width 70px
	height 70px
	margin-right 1rem
	border-radius ui-element-border-radius

.group-info
	vertical

.group-name
	horizontal
	align-items center

.group-tagline
	opacity 0.6

.group-member-count
	position absolute
	top 0.5rem
	right 1rem
	text-align right
	font-size 0.8rem
	opacity 0.5