Add hero image & collapsify lang selection

output/css/instructions.css

@@ -2,7 +2,7 @@ header {
   text-align: center;
 }
 
-label[for^=language-selection] {
+label[for^=language-selection_] {
   font-size: 1.2em;
   padding-right: 0.5em;
   padding-block: 0.5em;
@@ -36,9 +36,42 @@ label[for^=language-selection] {
 	text-align: right;
 }
 
+#instructions-image {
+	background: linear-gradient(to bottom right, lightgray, gray);
+	background: url("/assets/img/instructions/instructions.webp");
+	aspect-ratio: 1200 / 630;
+	background-repeat: no-repeat;
+	background-position: bottom 20% left 50%;
+	background-size: calc(clamp(400px, 100%, 750px));
+	max-width: 750px;
+	margin-inline: auto;
+	box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.5);
+	border-radius: 5px;
+}
+
 @media (max-width: 750px) {
-	.language-selection {
+	#language-selection-title {
+		width: 100%;
+	}
+
+	#language-selection-title label {
+		display: inline-flex;
+		justify-content: space-between;
+		width: 100%;
+		cursor: pointer;
+	}
+
+	#language-selection-show:not(:checked) ~ :is(.language-selection, .language-selection-label) {
+		display: none;
+	}
+
+	#language-selection-title label::after {
+		content: "+";
+		padding-inline: 0.5em;
+	}
 
+	#language-selection-show:checked ~ #language-selection-title label::after {
+		content: "−";
 	}
 
 	label[for^=language-selection] {

sites/instructions/index.php

@@ -24,7 +24,7 @@
 		<link rel="stylesheet" href="/css/instructions.css">
 		<style type="text/css">
 <?php foreach ($instruction_files as $i => $file): ?>
-			#language-selection-<?=$i?>:checked ~
+			#language-selection_<?=$i?>:checked ~
 			#instructions #instructions-<?=$i?> {
 				display: block;
 			}
@@ -41,18 +41,21 @@
 					Go back to Community list
 				</a>
 			</p>
-			<h2 id="language-selection-title">
-				Choose your language:
+			<div id="instructions-image" title="Mobile phone scanning a QR code from SessionCommunities.online."></div>
+			<input id="language-selection-show" class="hidden" type="checkbox">
+			<h2 id="language-selection-title" title="Click to show available languages">
+				<label for="language-selection-show" tabindex="0">
+					Choose language
+				</label>
 			</h2>
-			<br>
 <?php foreach ($instruction_files as $i => $file): ?>
 			<input
-				id="language-selection-<?=$i?>"
+				id="language-selection_<?=$i?>"
 				class="language-selection"
 				name="language"
 				type="radio"
 				<?=file_language($file) == 'English' ? 'checked="checked"' : ''?>
-			><label for="language-selection-<?=$i?>">&nbsp;<?=
+			><label class="language-selection-label" for="language-selection_<?=$i?>">&nbsp;<?=
 					file_language($file);
 			?></label>
 <?php endforeach; ?>