.counter
  font-family: inherit
  font-size: inherit
  display: flex
  flex-direction: column
  align-items: center
  gap: 1rem
  margin: 2rem
  color: white
  border: 1px solid rgba(22, 34, 60, 0.5)
  padding: 1rem 2rem
  border-radius: 16px
  background: rgba(134, 152, 217, 0.1)
  width: 3rem

  &__display
    font-size: 1.75rem
    font-weight: bold

  &__buttons
    display: flex
    justify-content: center
    gap: 0.25rem

  &__decrement
    width: 2rem
    height: 2.25rem
    padding: auto
    font-size: 1rem
    font-weight: bold
    cursor: pointer
    text-decoration: none
    background-color: rgba(86, 14, 14, 0.915)
    border-radius: 8px
    color: white
    border: 1px solid rgba(255,255,255,0.2)

    &:active
      transform: scale(0.95)

  &__increment
    @extend .counter__decrement
    background-color: rgb(14, 42, 86, 0.915)

    &:active
      transform: scale(0.95)