Added image upload for groups

pages/groups/groups.pixy

@@ -18,7 +18,7 @@ component Groups(groups []*arn.Group, groupsPerPage int, user *arn.User)
 	#load-more-target.groups
 		each group in groups
 			a.group.mountable(href=group.Link())
-				img.group-image.lazy(data-src=group.ImageURL(), alt=group.Name)
+				img.group-image.lazy(data-src=group.ImageLink("small"), data-webp="true", data-color=group.AverageColor(), alt=group.Name)
 				
 				.group-info
 					h3.group-name= group.Name

pages/groups/groups.scarlet

@@ -4,8 +4,11 @@ const group-padding-x = 0.75rem
 .groups
 	display grid
 	grid-gap content-padding-half
-	// grid-template-columns repeat(auto-fill, min(100%, 520px))
-	// justify-content center
+
+> 600px
+	.groups
+		grid-template-columns repeat(auto-fit, 520px)
+		justify-content center
 
 .group
 	horizontal
@@ -21,21 +24,18 @@ const group-padding-x = 0.75rem
 		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
+	overflow hidden
 
 .group-name
-	horizontal
-	align-items center
+	// horizontal
+	// align-items center
+	clip-long-text
 
 .group-tagline
 	opacity 0.6
+	clip-long-text
 
 .group-member-count
 	position absolute