.pagination { margin-top: 50px; &__title { display: flex; text-align: center; position: relative; margin: 100px 0 20px; &-h { text-align: center; margin: 0 auto; padding: 5px 10px; background: var(--background); color: var(--color-secondary); font-size: .8rem; text-transform: uppercase; text-decoration: none; letter-spacing: .1em; z-index: 1; } hr { position: absolute; left: 0; right: 0; width: 100%; margin-top: 15px; z-index: 0; } } &__buttons { display: flex; align-items: center; justify-content: center; a { text-decoration: none; font-weight: bold; } } } .button { position: relative; display: inline-flex; align-items: center; justify-content: center; background: var(--background-secondary); font-size: 1rem; font-weight: 500; border-radius: 8px; max-width: 40%; padding: 0; cursor: pointer; appearance: none; + .button { margin-left: 10px; } a { display: flex; padding: 8px 16px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &__text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &.next .button__icon { margin-left: 8px; } &.previous .button__icon { margin-right: 8px; } }