/* @group @variables */

[class*="o-mutual-bread"] {
--font-size: .875rem;
--line-height: 1.71428571;
}

:where([class*="o-mutual-bread"]) li:last-of-type {
--font-weight: 500;

--color: var(--color-dimgray);
}

/* @end @variables */

/* @group @o-mutual-bread-primary */

[class*="o-mutual-bread"] {
box-sizing: border-box;
overflow: hidden;
display: grid;
justify-content: start;
grid-auto-flow: column;
gap: .75rem;
padding: .75rem var(--x-padding-right) calc(.75rem + .375rem) var(--x-padding-left);
background-color: var(--color-white);
box-shadow: var(--box-shadow, inset 0 -1px 0 0 var(--border-color));
}

[class*="o-mutual-bread"] li {
display: grid;
justify-content: start;
align-items: center;
grid-template-columns: repeat(2, auto);
gap: .75rem;
}

@media (width < 48em) { /* 0 -> 767px */

[class*="o-mutual-bread"] li:last-of-type {
grid-row: 2;
min-width: 100%;
max-width: 100%;
}

}

[class*="o-mutual-bread"] li:not(:last-of-type):after {
content: '/';
grid-column: 2;
position: relative;
display: grid;
place-items: center;
font-size: .75rem;
line-height: 1;
vertical-align: top;
}

/* @end @o-mutual-bread-primary */