stevemercatante.com Pagination styled component

Pagination.js

import styled from 'styled-components'

const Pagination = styled.div`
  margin-bottom: 60px;
  display: flex;
  width: 100%;

  @media (max-width: 760px) {
    flex-direction: column;
  }

  .link {
    display: flex;
    flex-direction: column;
    border: 2px solid ${props => props.theme.primaryColor};
    padding: 10px;
    margin-top: 10px;
    display: flex;
    justify-content: center;
    font-weight: 500;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;

    :hover {
      background-color: #3e86e4;
      color: #f5f7fa;
    }

    span {
      align-self: center;
    }
  }

  .prev {
    margin-right: 20px;

    a {
      align-self: center;
    }
  }

  .next {
    a {
      align-self: center;
    }
  }
`