Add active state for mobile HoverCard

- **New functionality**: Introduced an active state for `HoverCard` on mobile devices, triggered via click.
- **Style updates**: Added styles to handle `active` class for text and image opacity.
- **Responsive aspect ratio**: Ensured square aspect ratio with the addition of `aspect-ratio: 1 / 1` in CSS.
- **Script enhancement**: Implemented JavaScript for toggling the active state on mobile.

src/styles/components/HoverCard.css

@@ -101,6 +101,15 @@
 	opacity: 0.1;
 }
 
+/* Active state for mobile click functionality */
+.hover-card.active .hover-text {
+	opacity: 1;
+}
+
+.hover-card.active .card-image {
+	opacity: 0.1;
+}
+
 .hover-text p {
 	margin: 0;
 	padding: 0;
@@ -110,5 +119,8 @@
 	.hover-card {
 		width: 100%;
 		max-width: 350px;
+		/* Maintain square aspect ratio */
+		aspect-ratio: 1 / 1;
+		height: auto;
 	}
 }