Force 3 columns on mobile

src/lib/structures/TimelineEntry.js

@@ -149,7 +149,7 @@ class TimelineEntry extends TimelineBaseMethods {
 	}
 
 	getThumbnailSizes() {
-		return `(max-width: 820px) 120px, 260px` // from css :(
+		return `(max-width: 820px) 200px, 260px` // from css :(
 	}
 
 	async fetchChildren() {

src/site/sass/main.sass

@@ -1,5 +1,6 @@
 $layout-a-max: 820px
 $layout-b-min: 821px
+$layout-c-max: 680px;
 $layout-home-a-max: 520px
 $layout-home-b-min: 521px
 
@@ -100,9 +101,12 @@ body
 	$background: #fff4e8
 
 	@media screen and (max-width: $layout-a-max)
-		--image-size: 120px
+		--image-size: 150px
 		flex: 1
 
+	@media screen and (max-width: $layout-c-max)
+		--image-size: calc(33vw - 10px)
+
 	background-color: $background
 	padding: 15px 15px 40px
 
@@ -154,6 +158,12 @@ body
 		flex-wrap: wrap
 		margin: 0 auto
 
+		@media screen and (max-width: $layout-c-max)
+			display: grid
+			grid-template-columns: repeat(3, 1fr)
+			justify-content: center
+			justify-items: center
+
 		@mixin sized()
 			width: $image-size
 			height: $image-size
@@ -172,6 +182,15 @@ body
 				margin: $margin - $border-width
 				border: $border-width solid #111
 
+			@media screen and (max-width: $layout-c-max)
+				$margin: 2px
+				margin: $margin
+
+				&:hover
+					$border-width: 2px
+					margin: $margin - $border-width
+					border: $border-width solid #111
+
 			.sized-image
 				@include sized