Pagination

css/index.css

@@ -15,6 +15,7 @@
 @import "comment-respond";
 @import "avatar";
 @import "link";
+@import "pagination";
 
 :root {
   --color-black: #000;

css/page.css

@@ -19,6 +19,11 @@
   position: relative;
 }
 
+.page__pagination {
+  display: flex;
+  justify-content: center;
+}
+
 @media (--viewport-lg) {
   .page {
     grid-template-columns: 224px 1fr;
@@ -51,6 +56,7 @@
     grid-row: span 1;
   }
 
+  .page__pagination,
   .page__footer {
     grid-column: 1 / -1;
   }

css/pagination.css

@@ -0,0 +1,50 @@
+.pagination {
+  display: flex;
+  flex-flow: row wrap;
+}
+
+.pagination__list {
+  display: flex;
+}
+
+.pagination__item {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  padding: 0 var(--space-xs);
+}
+
+.pagination__dots {
+  display: flex;
+  color: var(--color-light-blue);
+}
+
+.pagination__current {
+  font-weight: 700;
+  position: relative;
+}
+
+.pagination__current:after {
+  background-color: var(--color-light-blue);
+  bottom: -1px;
+  content: '';
+  left: 0;
+  height: 2px;
+  position: absolute;
+  right: 0;
+}
+
+.pagination__link,
+.pagination__link:hover,
+.pagination__link:focus,
+.pagination__link:visited {
+  display: block;
+  position: relative;
+  color: var(--color-light-blue);
+  transition: transform var(--transition-md) ease-out;
+}
+
+.pagination__link:focus,
+.pagination__link:hover {
+  transform: scale(1.3);
+}