aider: Increase highlight image size on mobile using em units for better responsiveness.

# Aider chat conversation:

USER: can the highlight image be bigger on mobile? does it make sense to use em not pixels to size it?

ASSISTANT: Using `em` units for the highlight image size can be beneficial for responsiveness, as `em` units are relative to the font-size of the element (or the body if not set), which can scale better across different screen sizes and maintain the design's typographic harmony.

To make the highlight image bigger on mobile, we can use a media query that targets smaller screen sizes and increases the `max-width` of the `.post-highlight` class in `em` units. Here's the diff for the changes:

```diff
--- assets/css/style.scss
+++ assets/css/style.scss
@@ ... @@
 .post-highlight {
-  max-width: 200px;
+  max-width: 12.5em; /* Assuming the base font-size is 16px, 12.5em is equivalent to 200px */
   margin-right: 1em;
 }

+@media (max-width: 768px) {
+  .post-highlight {
+    max-width: 18em; /* Larger size on mobile */
+  }
+}
+
 .post-content {
   display: flex;
   align-items: flex-start;
```

This change assumes that the base font size is 16px, which is a common default for browsers. If the base font size is different, you may need to adjust the `em` values accordingly. The media query targets screens with a maximum width of 768px, which is a common breakpoint for tablets and mobile devices.

assets/css/style.scss

@@ -26,10 +26,16 @@
 }
 
 .post-highlight {
-  max-width: 200px;
+  max-width: 12.5em; /* Assuming the base font-size is 16px, 12.5em is equivalent to 200px */
   margin-right: 1em;
 }
 
+@media (max-width: 768px) {
+  .post-highlight {
+    max-width: 18em; /* Larger size on mobile */
+  }
+}
+
 .post-content {
   display: flex;
   align-items: flex-start;