WIP: Better styles for Rainbow Pool pet type page

app/assets/stylesheets/pet_types/show.sass

@@ -0,0 +1,26 @@
+@import "../partials/clean/constants"
+
+.pet-states
+    list-style-type: none
+    display: flex
+    flex-wrap: wrap
+    justify-content: center
+    gap: .5em
+
+    > li
+        width: 200px
+        max-width: calc(50% - .25em)
+        min-width: 150px
+        padding: .5em
+        box-sizing: border-box
+        text-align: center
+
+    outfit-viewer
+        width: 100%
+        height: auto
+        aspect-ratio: 1 / 1
+        z-index: -1
+        margin-bottom: -1em
+
+    .name
+        background: white

app/views/pet_states/_pet_state.html.haml

@@ -1,6 +1,5 @@
 %li
 	= outfit_viewer pet_state:
-	= pose_name pet_state.pose
-	(#{pet_state.id})
+	%span.name= pose_name pet_state.pose
 	- if pet_state.glitched?
 		👾

app/views/pet_types/show.html.haml

@@ -1,18 +1,19 @@
 - title "#{@pet_type.human_name}"
 - use_responsive_design
 
-%ul
+%ul.pet-states
 	= render @pet_states[:canonical]
 
 - if @pet_states[:other].present?
 	%details
 		%summary Other
-		%ul
+		%ul.pet-states
 			= render @pet_states[:other]
 
 - content_for :stylesheets do
 	= stylesheet_link_tag "application/hanger-spinner"
 	= stylesheet_link_tag "application/outfit-viewer"
+	= stylesheet_link_tag "pet_types/show"
 
 - content_for :javascripts do
 	= javascript_include_tag "outfit-viewer", async: true