.p-categories {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  @media all and (min-width: 1024px) {
    gap: 20px;
  }
  @media not all and (min-width: 1024px) {
    justify-content: flex-start;
    gap: 10px;
  }
}

.p-categories__child {
  a {
    display: block;
    background: #d9d9d9;
    color: #fff;
    border-radius: 100px;
  }
  .is-current {
    background-color: var(--secondary-color);
    color: #ffffff;
  }
  @media (any-hover: hover) {
    a:hover {
      background-color: var(--secondary-color);
      color: #ffffff;
    }
  }
  @media all and (min-width: 1024px) {
    a {
      padding: 8px 20px;
      width: fit-content;
    }
  }
  @media not all and (min-width: 1024px) {
    width: calc((100% - 10px) / 2);
    a {
      text-align: center;
      padding: 12px 10px;
      border-radius: 24px;
      font-size: 12px;
    }
  }
}

.p-categories__button {
  @media all and (min-width: 1024px) {
    display: none;
  }
  @media not all and (min-width: 1024px) {
    width: 48px;
    height: 48px;
    display: block;
    margin: 20px auto 0;
  }
}

.p-categories--archive.is-show + .p-categories__button {
  display: none;
}

.p-categories--archive .p-categories__child:nth-child(n + 5) {
  @media not all and (min-width: 1024px) {
    display: none;
  }
}

.p-categories--archive.is-show .p-categories__child:nth-child(n + 5) {
  @media not all and (min-width: 1024px) {
    display: block;
  }
}