Mejorado paginate visualmente, es mas bonito y espaciado

Me copie levemente de lastfm

src/styles/main.scss

@@ -14,7 +14,7 @@
 body {
   max-width: 75rem;
   margin: 0 auto;
-  padding: 0 1rem 1em 1em;
+  padding: 0 1rem 4rem 1rem;
   font-family: sans-serif;
   color: var(--black);
   overflow-y: scroll;
@@ -76,32 +76,39 @@ h1, h2, h3, h4 {
 ul.pagination {
   display: flex;
   margin: 1rem auto;
+  justify-content: space-between;
+
+  .page-center {
+    display: flex;
+  }
 
   .page-item {
-    height: 2rem;
+    height: 2.5rem;
+    text-align: center;
+
+    &.left, &.right {
+      width: 7rem;
+    }
 
     .page-link {
       display: inline-block;
       height: 100%;
 
-      border: 1px solid var(--gray-2);
-      border-radius: 3px;
       margin-right: .4rem;
-      padding: .5rem 1em;
+      padding: .75rem 1rem;
 
       color: var(--black);
       text-decoration: none;
-      font-size: .75rem;
       line-height: 1;
 
+
       &.active {
-        background-color: var(--accent);
-        color: var(--white);
+        color: var(--accent);
+        border-bottom: 2px solid var(--accent);
       }
 
       &:hover:not(.active) {
-        background-color: var(--gray-2);
-        border: 1px solid var(--gray-3);
+        border-bottom: 2px solid var(--accent);
       }
 
       &:focus {
@@ -112,6 +119,7 @@ ul.pagination {
 
   .spacing {
     margin: auto 1rem;
+    font-weight: normal;
   }
 }
 
@@ -248,3 +256,6 @@ ul.tabs {
   }
 }
 
+*[hidden] {
+ visibility: hidden;
+}