Paginacion mas bonita y aceptable a la vista

src/styles/main.scss

@@ -76,28 +76,42 @@ h1, h2, h3, h4 {
 ul.pagination {
   display: flex;
   margin: 1rem auto;
-  justify-content: center;
 
   .page-item {
-    border: 1px solid var(--gray-2);
+    height: 2rem;
 
-    &.active {
-      background-color: var(--accent);
+    .page-link {
+      display: inline-block;
+      height: 100%;
 
-      a {
-        color: white;
+      border: 1px solid var(--gray-2);
+      border-radius: 3px;
+      margin-right: .4rem;
+      padding: .5rem 1em;
+
+      color: var(--black);
+      text-decoration: none;
+      font-size: .75rem;
+      line-height: 1;
+
+      &.active {
+        background-color: var(--accent);
+        color: var(--white);
+      }
+
+      &:hover:not(.active) {
+        background-color: var(--gray-2);
+        border: 1px solid var(--gray-3);
+      }
+
+      &:focus {
+        outline: none;
       }
     }
   }
 
-  .page-link {
-    color: var(--black);
-    text-decoration: none;
-    padding: 0 1rem;
-
-    @media (max-width: 767px) {
-      padding: 0 .4rem;
-    }
+  .spacing {
+    margin: auto 1rem;
   }
 }