.wp-block-query-pagination {
  gap: 40px !important;
  flex-wrap: nowrap !important;

  @media screen and ( max-width: 600px ) {
    gap: 8px !important;
  }

  * {
    font-size: 18px;

    @media screen and ( max-width: 600px ) {
      font-size: 14px;
    }
  }

  .wp-block-query-pagination-previous,
  .wp-block-query-pagination-next {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 9px;
  }

  .wp-block-query-pagination-previous::before,
  .wp-block-query-pagination-next::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url('../../img/arrow.svg'); /* put your svg file here */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
  }

  .wp-block-query-pagination-next::after {
    transform: rotate(-180deg);
  }

  .wp-block-query-pagination-numbers {
    .page-numbers {
      display: inline-flex;
      justify-content: center;
      align-items: center;

      text-decoration: none;
      text-underline-offset: 40%;
      width: 40px;
      height: 40px;
      border-radius: 100%;
      
      .dots {
        cursor: pointer;
      }

      &.current {
        border: 2px solid #154734;
      }

      &:not(.current):not(.dots):hover {
        border: 2px solid #1547349f;
      }

      @media screen and ( max-width: 600px ) {
        width: 23px;
        height: 23px;
        border-width: 1px !important;
      }
    }
  }
}