.atm-pager {
    @apply flex;
    @apply justify-center;

    ul {
        @apply font-bold;

        li {
            @apply inline-block;

            a {
                @apply w-[40px] h-[40px] leading-[40px] text-center block rounded-full font-display font-normal transition;

                &:hover{
                    @apply text-primary ;
                    font-weight:bold;
                }
                &.active {
                    @apply bg-primary text-white border-2 border-primary ;
                }
            }

            &:first-child{
                a{
                    @apply bg-gray-100 text-secondary-col-1;
                }
            }
            &:last-child{
                a{
                    @apply bg-gray-100 text-secondary-col-1;
                }
            }

            &:last-child, &:first-child{
                a:hover{
                    @apply bg-secondary-col-1 text-white;
                }
            }
        }
    }
}