Fix "me" image on the about page

Add a section shortcode to enable wrapping a chunk of a post in a <section>
Add a section.flow class that removes grid from the section
Fix up the about styles so that the paragraph that Hugo wraps the <img> in behaves sensibly when floated
Fix the alt text in the circular_image shortcode

content/about/_index.md

@@ -4,10 +4,15 @@ date: 2022-09-03T12:14:32-07:00
 resources:
   - name: me
     src: me.jpeg
+    params:
+      alt: "
+        Me, wearing a hat and smiling slightly, standing in front of a stone background.
+      "
 ---
 
-{{< circular_image id=me name=me class="float-right" width=200
-  alt="A photo of me, wearing a hat, standing in front of a stone background">}}
+{{% section class=flow %}}
+
+{{< circular_image id=me name=me class="float-right" width=200 >}}
 
 I'm Eryn. My pronouns are [she/her][p]. I'm a queer trans woman. I live in San
 Francisco, CA, on the unceded ancestral lands of the Ramaytush Ohlone people,
@@ -17,6 +22,8 @@ I attended [Oberlin College][ob] where I got a degree in Computer Science.
 
 I speak English natively, and Spanish too, though I always need more practice.
 
+{{% /section %}}
+
 ## Hobbies
 
 I've been a musician for most of my life. I started on the piano at age seven,

content/about/style.css

@@ -1,4 +1,14 @@
 @layer page {
+  main > section > p:not(:last-child) {
+    margin-bottom: var(--body-item-spacing);
+  }
+
+  p:has(img#me) {
+    display: inline;
+    grid-column: unset;
+    margin-bottom: 0;
+  }
+
   img#me {
     margin: 0;
     shape-outside: circle(55%);