.pagination {
  padding: 30px 0px; }
  .pagination .mobile-pagination {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center; }
    .pagination .mobile-pagination p {
      margin: 0px;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.8px;
      color: #191d23; }
    .pagination .mobile-pagination li {
      background: var(--cloetta-gray-lighter) !important; }
  @media (min-width: 767px) {
    .pagination .mobile-pagination {
      display: none; } }
  @media (max-width: 767px) {
    .pagination {
      max-width: calc(100% - 32px);
      overflow: hidden; }
      .pagination .desktop-pagination {
        display: none; } }
  .pagination .pagination-button-inner {
    -webkit-box-align: center;
    align-items: center;
    display: flex; }
  .pagination .js-paginate-previous {
    display: flex; }
    .pagination .js-paginate-previous div:first-child {
      margin-right: 12px; }
    .pagination .js-paginate-previous svg {
      transform: rotate(180deg); }
      .pagination .js-paginate-previous svg path {
        stroke: #191d23; }
    .pagination .js-paginate-previous p {
      margin: auto; }
  .pagination .js-paginate-next {
    display: flex; }
    .pagination .js-paginate-next svg {
      transform: none; }
      .pagination .js-paginate-next svg path {
        stroke: #191d23; }
    .pagination .js-paginate-next p {
      margin: auto; }

#pagination {
  display: flex;
  justify-content: center; }
  #pagination li {
    display: inline-flex;
    color: #191d23;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.8px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    background-color: transparent;
    cursor: pointer;
    user-select: none;
    vertical-align: middle;
    font-family: Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.43;
    text-align: center;
    box-sizing: border-box;
    min-width: 40px;
    height: 40px;
    outline: 0px;
    border-width: 0px;
    border-style: initial;
    border-color: initial;
    border-image: initial;
    text-decoration: none;
    border-radius: 4px;
    padding: 0px 10px;
    margin: 0px 3px;
    transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1), background-color 250ms cubic-bezier(0.4, 0, 0.2, 1); }
    #pagination li.active {
      background-color: var(--soft-pink-lighter) !important;
      color: var(--cloetta-red-darker); }