.PaginationMain { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .PaginationMainInside { width: 100%; max-width: 600px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; grid-gap: 10px; height: 50px; } @media (max-width: 768px) { .PaginationMainInside { flex-direction: row; height: unset; max-width: unset; } } .PaginationMainInsideBox { transition: ease 0.4s; text-decoration: unset; color: unset; padding: 10px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(35, 35, 35, 0); border-radius: 10px; height: 100%; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0); transform: scale(1); border: solid 1px rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0.1); font-weight: bold; } .PaginationMainInsideBox.PaginationMainInsideBoxArrows { } .PaginationMainInsideBox.PaginationMainInsideBoxArrows:disabled { cursor: not-allowed; } @media (max-width: 768px) { .PaginationMainInsideBox.PaginationMainInsideBoxArrows { order: 2; flex-grow: 1; } } .PaginationMainInsideBox:hover { transition: ease 0.4s; text-decoration: unset; color: unset; background: linear-gradient(to top right, #232323, #262626, #232323); box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1); transform: scale(1.01); border: solid 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); } .PaginationMainInsideBox:active { transition: ease 0.1s; transform: scale(0.98); } .PaginationMainInsideBox.PMIBActive { transition: ease 0.4s; text-decoration: unset; color: unset; transform: scale(1.01); border: solid 1px rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.75); } .PMIBDots { border: unset; background: unset; box-shadow: unset; } .PaginationMainInsideBoxGroup { display: flex; flex-direction: row; justify-content: center; grid-gap: 10px; } @media (max-width: 768px) { .PaginationMainInsideBoxGroup { width: 100%; order: 1; justify-content: space-around; } }