/* @group @.o-page-nav */

.o-page-nav {
padding-top: var(--spacing-xx-small);
box-shadow: 0 -1px 0 0 var(--gray-colors-90);
}

/* @end @.o-page-nav */

/* @group @m-page-header-nav-primary */

.m-page-header-nav-primary {
--grid-columns: repeat(var(--column-count), auto);
--column-count: 4;
--column-gap: 1px;
--row-gap: 1px;
--margin-bottom: 0;
}

/* @end @m-page-header-nav-primary */

/* @group @m-page-header-nav-primary */

.m-page-header-nav-primary {
position: relative;
width: 100%;
height: var(--line-clamp-1-75);
background: var(--gray-colors-90);
}

@media all and (max-width: 47.9375em) {

.m-page-header-nav-primary {
font-size: var(--font-size-x-small);
}

}

.m-page-header-nav-primary li {
display: flex;
padding: 1px;
background: var(--gray-colors-100);
}

.m-page-header-nav-primary a {
box-sizing: border-box;
width: 100%;
background: var(--gray-colors-100);
}

.m-page-header-nav-primary .is-active a {
background: var(--brand-primary-color);

color: var(--neutral-colors-100);
}

.m-page-header-nav-primary a:hover,
.m-page-header-nav-primary a:focus {
background: var(--brand-primary-color-action);
color: var(--neutral-colors-100);
}

.m-page-header-nav-primary a:active {
background: var(--brand-primary-color-active);
color: var(--neutral-colors-100);
}

@media all and (min-width: 48em) {

.m-page-header-nav-primary:before,
.m-page-header-nav-primary:after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--gray-colors-90);
}

.m-page-header-nav-primary:before {
right: -1px;
}

.m-page-header-nav-primary:after {
left: -1px;
}

}

/* @end @m-page-header-nav-primary */