/*
 * The Business Knowledge Centre output is intentionally light-weight.
 * The articles use one normal <ul>; CSS only distributes that list into columns.
 */
.mnf-bkc-search {
    clear: both;
    margin: 0 0 2rem;
}

.mnf-bkc-articles {
    clear: both;
    margin: 2rem 0 0;
}

.mnf-bkc-title {
    margin: 0 0 .75rem;
}

.mnf-bkc-muted {
    margin: 0 0 1rem;
}

.mnf-bkc-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.mnf-bkc-search-form input[type="search"] {
    flex: 1 1 16rem;
    max-width: 34rem;
}

.mnf-bkc-article-list {
    column-count: 4;
    column-gap: 2rem;
    margin: 1rem 0;
    padding-left: 1.25rem;
}

.mnf-bkc-article-list li {
    break-inside: avoid;
    margin: 0 0 .6rem;
}

@media (max-width: 1024px) {
    .mnf-bkc-article-list {
        column-count: 3;
    }
}

@media (max-width: 720px) {
    .mnf-bkc-search-form {
        display: block;
    }

    .mnf-bkc-search-form input[type="search"],
    .mnf-bkc-search-form button {
        margin: 0 0 .5rem;
        width: 100%;
    }

    .mnf-bkc-article-list {
        column-count: 2;
    }
}

@media (max-width: 480px) {
    .mnf-bkc-article-list {
        column-count: 1;
    }
}