did a lot of syle work and started search and detail pages

src/components/hero/hero.module.css

@@ -29,7 +29,7 @@
     gap: 1rem;
     justify-content: start;
 
-    padding-inline: 2rem;
+    padding-inline: var(--size-6);
 
     inline-size: 100%;
     block-size: 8.333333em;
@@ -53,7 +53,7 @@
   align-content: end;
   align-items: center;
   gap: 1rem;
-  padding: 2rem;
+  padding: var(--size-6);
   block-size: 80vh;
   overflow: clip;
   container-type: scroll-state;
@@ -114,6 +114,11 @@
   text-decoration-color: var(--gray-8);
   padding: var(--size-3);
   font-weight: var(--font-weight-9);
+  outline-offset: var(--size-1);
+
+  &:focus-visible {
+    outline: 1px solid var(--gray-2);
+  }
 }
 
 .thumbnail {
@@ -152,9 +157,6 @@
   0% {
     opacity: 0;
   }
-  /* 80% {
-    opacity: 0;
-  } */
   100% {
     opacity: 1;
   }