.pagination__container{
    container: pagination / inline-size;
}

.pagination{
    padding-inline: 24px;
    padding-block: 0 40px;
    display: flex;
    flex-flow: row wrap;
    gap: 8px;

    > :is(a, button){
        font-family: var(--_font-family-semibold);
        text-decoration: none;
        min-inline-size: 48px;
        min-block-size: 48px;
        padding-inline: 24px;
        padding-block: 12px;
        border: 2.5px solid var(--_color-gray-2);
        border-radius: 8px;
        transition: all .3s ease;
        display: flex;
        align-items: center;
        justify-content: center;

        &[active]{
            background: var(--_color-black);
            color: var(--_color-white);
        }

        &:not([active]):hover{
            background: var(--_color-gray-2);
        }
    }
}

@container pagination (min-width: 768px){
    .pagination{
        padding-inline: 48px;
    }
}

@container pagination (min-width: 1280px){
    .pagination{
        padding-inline: 96px;
    }
}

@container pagination (min-width: 1440px){
    .pagination{
        padding-inline: calc(50% - 1248px / 2);
    }
}