.pagination {
	display: flex;
  margin: $gap 0;

  a {
    align-items: center;
    background-color: rgba($color-black, 0.05);
    display: flex;
    justify-content: flex-end;
    min-height: 6rem;
    overflow: hidden;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    position: relative;
		text-decoration: none;
    width: 100%;
    word-wrap: break-word;

    &:hover,
    &:focus {
      background-color: rgba($color-black, 0.1);
    }

    &:first-child,
    &.previous-link,
    &.prev.page-numbers {
      border-right: 1px solid rgba($color-black, 0.1);
      justify-content: flex-start;
      padding: 0 2rem;
      position: relative;

      i {
				font-size: 2rem;
        left: 0;
        position: absolute;
        top: 30%;
      }

      &:first-child:before {
        bottom: -0.5rem;
        content: "Previous";
        font-size: 5rem;
        font-weight: 700;
        left: 0.5rem;
        line-height: 5rem;
        opacity: 0.05;
        position: absolute;
      }
    }

    &:last-child,
    &.next-link,
    &.next.page-numbers {
      padding: 0 2rem;
      position: relative;
      text-align: right;

      i {
				font-size: 2rem;
				position: absolute;
        right: 0rem;
        top: 30%;
      }

      &:last-child:before {
        bottom: -0.5rem;
        content: "Next";
        font-size: 5rem;
        font-weight: 700;
        line-height: 5rem;
        opacity: 0.05;
        position: absolute;
        right: 0.5rem;
      }
    }
  }
}