:where(.navigation-buttons *) {
    margin-top: 0;
}

.navigation-buttons {
    --link-color: var(--color-black);
    --link-underline: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.navigation-buttons__link {
    flex: 1 1 11.25rem;
    align-content: center;
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    border: solid 2px var(--color-black);
    padding: 0.5rem 1.5rem;
    transition: background-color 0.3s ease;
}

    .navigation-buttons__link:hover {
        background-color: var(--_link-bg, var(--color-black));
        color: var(--_link-fg, var(--color-white));
    }

/* Old */
.grid-buttons {
    display: grid;
    gap: var(--gutter);
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

    .grid-buttons > * {
        margin-top: 0;
    }

.list-buttons {
    --link-color: #000;
    --link-underline: none;
    display: flex;
    border: solid 1px var(--list-buttons-border-color, #000);
}

    .list-buttons > a {
        margin-top: 0;
        flex: 1 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        min-height: 1.85em;
        text-align: center;
        padding: 0.5rem;
        transition: all 0.25s ease-in-out;
    }

        .list-buttons > a:not(:last-child) {
            border-right: solid 1px var(--list-buttons-border-color, #000);
        }

        .list-buttons > a:hover,
        .list-buttons > a.is-active {
            --link-color: #fff;
            background-color: #000;
        }

@media (max-width: 599px) {
    .list-buttons {
        flex-wrap: wrap;
    }

        .list-buttons > a {
            flex-basis: 100%;
            padding: 0.5rem;
        }

            .list-buttons > a:not(:last-child) {
                border-right: 0;
                border-bottom: solid 1px var(--list-buttons-border-color, #000);
            }
}