feat(video-cards): add click navigation to video and shorts cards

Implement click event handlers for video cards, shorts cards, and search results to navigate to their respective detail pages. Also adjust grid layout dimensions for better responsiveness.

css/style.css

@@ -1,4 +1,4 @@
-/* 全局样式重置 */
+/* å…¨å±€æ ·å¼é‡ç½® */
 * {
     margin: 0;
     padding: 0;
@@ -328,7 +328,7 @@ body {
 /* Video grid */
 .video-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(550px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
     gap: 24px;
     margin-bottom: 48px;
 }
@@ -360,7 +360,7 @@ body {
 .video-thumbnail {
     position: relative;
     width: 100%;
-    padding-top: 56.25%; /* 16:9 比例 */
+    padding-top: 56.25%; /* 16:9 比例 */
     background-color: #303030;
 }
 
@@ -494,7 +494,7 @@ body {
     color: #909090;
 }
 
-/* Shorts 部分 */
+/* Shorts 部分 */
 .shorts-section {
     margin-top: 48px;
 }
@@ -508,7 +508,7 @@ body {
 
 .shorts-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
     gap: 20px;
 }
 
@@ -516,7 +516,7 @@ body {
 .shorts-card {
     position: relative;
     width: 100%;
-    padding-top: 177.78%; /* 9:16 比例 */
+    padding-top: 177.78%; /* 9:16 比例 */
     background-color: #303030;
     border-radius: 12px;
     overflow: hidden;