.apl-navigation-component {
    --apl-before: 0px;
    --apl-after: 24px;
    --apl-card-link-gap: 10px;
    --apl-columns: 3;
    --apl-column-gap: 24px;
    --apl-row-gap: 24px;
    --apl-justify: flex-start;
    --apl-card-width: 360px;
    --apl-list-gap: 6px;
    --apl-line-height: 1.2;
    --apl-font-size: 18px;
    --apl-weight: 700;
    --apl-font-style: normal;
    --apl-decoration: none;
    --apl-list-align: left;
    box-sizing: border-box;
    display: flow-root;
    clear: both;
    width: 100%;
    margin: var(--apl-before) 0 var(--apl-after) !important;
    padding: 0 !important;
}
.apl-navigation-component *,
.apl-navigation-component *::before,
.apl-navigation-component *::after { box-sizing: border-box; }
.apl-navigation-component.apl-debug { outline: 2px dashed #c00; outline-offset: 2px; }
.apl-navigation-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: var(--apl-justify);
    align-items: flex-start;
    column-gap: var(--apl-column-gap);
    row-gap: var(--apl-row-gap);
    width: 100%;
    max-width: 1100px;
    margin: 0 !important;
    padding: 0 !important;
}
.apl-navigation-card {
    box-sizing: border-box;
    flex: 0 1 min(var(--apl-card-width), calc((100% - (var(--apl-column-gap) * (var(--apl-columns) - 1))) / var(--apl-columns)));
    width: min(var(--apl-card-width), 100%);
    max-width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center;
    line-height: 0;
}
.apl-navigation-card-link,
.apl-navigation-card-static { display:block; width:100%; margin:0!important; padding:0!important; line-height:0; border-radius:8px; }
.apl-navigation-card-link { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.apl-navigation-card-link:hover,
.apl-navigation-card-link:focus { transform: translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.20); filter:brightness(1.04); }
.apl-navigation-image { display:block; width:100%; max-width:100%; height:auto; margin:0!important; padding:0!important; border-radius:8px; }

/*
 * Related links deliberately use a self-contained grid and aggressive resets.
 * This prevents paragraph, list, anchor, line-height, float and min-height rules
 * from Coraline or another theme from creating large vertical gaps.
 */
.apl-navigation-component .apl-related-links {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important;
    row-gap: var(--apl-list-gap) !important;
    column-gap: 0 !important;
    align-items: start !important;
    justify-items: stretch !important;
    float: none !important;
    clear: both !important;
    position: static !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: var(--apl-card-link-gap) 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: var(--apl-list-align) !important;
    font-size: var(--apl-font-size) !important;
    font-weight: var(--apl-weight) !important;
    font-style: var(--apl-font-style) !important;
    line-height: var(--apl-line-height) !important;
}
.apl-navigation-component .apl-related-links > .apl-related-link {
    display: block !important;
    float: none !important;
    clear: none !important;
    position: static !important;
    inset: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    transform: none !important;
    white-space: normal !important;
    text-indent: 0 !important;
    text-align: inherit !important;
    font: inherit !important;
    line-height: inherit !important;
    vertical-align: baseline !important;
    text-decoration: var(--apl-decoration) !important;
}
.apl-navigation-component .apl-related-links > a.apl-related-link:hover,
.apl-navigation-component .apl-related-links > a.apl-related-link:focus { text-decoration: underline !important; }
.apl-navigation-component .apl-related-link-inactive { opacity:.7; }
.apl-navigation-component.apl-layout-responsive_grid .apl-navigation-cards { flex-wrap:wrap; }
.apl-navigation-component.apl-layout-horizontal_row .apl-navigation-cards { flex-wrap:nowrap; overflow-x:auto; justify-content:var(--apl-justify); }
.apl-navigation-component.apl-layout-horizontal_row .apl-navigation-card { flex:0 0 var(--apl-card-width); width:min(var(--apl-card-width),85vw); }
.apl-navigation-component.apl-layout-vertical_stack .apl-navigation-cards { flex-direction:column; flex-wrap:nowrap; align-items:var(--apl-justify); justify-content:flex-start; }
.apl-navigation-component.apl-layout-vertical_stack .apl-navigation-card { flex:0 0 auto; width:min(var(--apl-card-width),100%); }
@media (max-width:900px) { .apl-navigation-component.apl-layout-responsive_grid .apl-navigation-card { flex-basis:calc((100% - var(--apl-column-gap))/2); } }
@media (max-width:560px) { .apl-navigation-component.apl-layout-responsive_grid .apl-navigation-card { flex-basis:100%; width:min(var(--apl-card-width),100%); } }