.pagination nav {
  display: grid;
  font-size: 20px;
  margin-top: 56px;
  grid-template-columns: auto 7% auto;
  grid-template-rows: auto;
  grid-template-areas: "left middle right";
  overflow: hidden;
  text-align: center;
  align-content: center;
  width: 100%;

  @media(max-width: 768px) {
    grid-template-columns: auto 27% auto;
  }

  >[data-id="prev"] {
    align-self: end;
    grid-area: left;
    justify-self: end;
    line-height: 1;
  }

  >[data-id="next"] {
    align-self: baseline;
    grid-area: right;
    justify-self: start;
    transform: rotate(180deg);
  }

  button {
    color: transparent;

    &:before {
      background-color: var(--color-secondary);
      content: '';
      display: inline-block;
      height: 20px;

      mask: url('/images/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
      mask-size: cover;
      -webkit-mask: url('/images/arrow-left-circle.svg') 1% 1% / 1px 1px no-repeat;
      -webkit-mask-size: cover;
      width: 20px;
    }

    &:hover:before {
      background-color: var(--color-primary);
    }

    &:disabled::before {
      background-color: #5D7393;
      opacity: 50%;
    }
  }

  span {
    color: #5D7393;
    font-size: 20px;
    font-weight: 600;
    line-height: 27px;
  }
}