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

.groups
	display grid
	grid-gap content-padding-half

> 600px
	.groups
		grid-template-columns repeat(auto-fit, 520px)
		justify-content center

.group
	horizontal
	ui-element
	position relative
	padding group-padding-y group-padding-x
	color text-color

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

.group-info
	vertical
	overflow hidden

.group-name
	clip-long-text

.group-tagline
	opacity 0.6
	clip-long-text

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