.posts-pagination-block {
  --gap: calc(var(--baseline) * 1) calc(var(--baseline) * 1);
  --size: calc(var(--baseline) * 5);

  @media screen and (min-width: 768px) {
    --size: calc(var(--baseline) * 5.5);
  }
  @media screen and (min-width: 960px) {
    --size: calc(var(--baseline) * 6);
  }

  &.top-margin-double {
    padding-top: calc( var(--baseline) * 12 );
  }
  &.top-margin-default {
    padding-top: calc( var(--baseline) * 4 );
  }

  &.bg-red,
  &.bg-grey {
    .block-item {
      border-color: var(--primary-50);
      color: var(--primary-50);

      &.current {
        color: var(--primary-500);
        background-color: var(--primary-50);
      }
    }
    @media (hover: hover) and (pointer: fine) {
      .block-item {
        &:hover {
          color: var(--primary-500);
          background-color: var(--primary-50);
        }
      }
    }
  }

  .inner-wrapper {
    padding-top: calc(var(--baseline) * 4);
    // padding-bottom: calc(var(--baseline) * 4);
  }

  .block-items {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    gap: var(--gap);
  }
  .block-item {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    border-radius: calc(var(--baseline) * .5);
    border: 1px solid var(--primary-500);
    width: var(--size);
    height: var(--size);
    text-decoration: none;
    color: var(--primary-500);
    background-color: var(--transparent);
    transition: all .4s;

    &.current {
      color: var(--primary-50);
      background-color: var(--primary-500);
    }
  }

  @media (hover: hover) and (pointer: fine) {
    .block-item {
      &:hover {
        color: var(--primary-50);
        background-color: var(--primary-500);
      }
    }
  }
}