Add hover state to comments QR code for easier scanning

sass/_comments.scss

@@ -1,14 +1,31 @@
 #comments {
 	#qrcode {
 		float: inline-end;
+		transform-origin: right;
+		cursor: none;
 		box-sizing: content-box;
 		margin-inline-start: 1rem;
 		margin-block-start: 3rem;
 		margin-block-end: 0;
+		outline-color: transparent;
+		outline-style: dashed;
+		outline-width: 0.125rem;
 		background-color: white;
 		padding: 0.75rem;
-		width: 7.8125rem;
-		height: 7.8125rem;
+		width: 7.8125rem; // 125px
+		height: 7.8125rem; // 125px
+
+		:root[dir*="rtl"] & {
+			transform-origin: left;
+		}
+
+		&:hover {
+			transform: scale(2);
+			outline-color: var(--primary-color);
+			outline-offset: 0.25rem;
+			border-radius: var(--rounded-corner-small);
+			padding: 0.5rem;
+		}
 
 		@media only screen and (max-width: 720px) {
 			display: none;

sass/_media.scss

@@ -39,24 +39,22 @@ video {
 
 	&.start,
 	&[src*="#start"] {
-		float: left;
+		float: inline-start;
 		transform-origin: left;
 		margin-inline-end: 1rem;
 
 		:root[dir*="rtl"] & {
-			float: right;
 			transform-origin: right;
 		}
 	}
 
 	&.end,
 	&[src*="#end"] {
-		float: right;
+		float: inline-end;
 		transform-origin: right;
 		margin-inline-start: 1rem;
 
 		:root[dir*="rtl"] & {
-			float: left;
 			transform-origin: left;
 		}
 	}