Fix mobile image display

_includes/postslist.njk

@@ -15,7 +15,7 @@
 				</h3>
 			</a>
 			<time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate("LLLL yyyy") }}</time>
-			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(110) | safe }}</p>{% else %}{{ post.content | truncate(140) | safe }}{% endif %}
+			{% if post.data.synopsis %}<p>{{ post.data.synopsis | truncate(200) | safe }}</p>{% else %}{{ post.content | truncate(140) | safe }}{% endif %}
 		</div>
 	</article>
 	{% endfor %}

public/css/index.css

@@ -74,9 +74,9 @@
 	:root {
 		/* Font Sizes */
 		--font-xxl: 2.25rem;
-		--font-xl: 1.25rem;
-		--font-l: 1.25rem;
-		--font-n: .95rem;
+		--font-xl: 1.5rem;
+		--font-l: 1.5rem;
+		--font-n: 1rem;
 	}
 }
 
@@ -510,18 +510,20 @@ h2 + .header-anchor {
 	}
 	.postlist-item {
 		flex-flow: column wrap;
+		width: 100%
 	}
 	.postlist-link {
+		width: 100%;
 		padding: 0;
 	}
 	.post-image {
 		width: 100%;
-		height: auto;
+		min-width: 100%;
 	}
 	.post-image-container {
 		margin-right: 0;
-		height: 10em;
-		min-width: 100%;
+		max-height: 10em;
+		width: 100%;
 	}
 	.post-metadata {
 		margin-bottom: var(--single-gap);