/* ============================================
   LAYOUT
   Container, Grid, Sections
   ============================================ */

.container {
    width: min(100% - 32px, 1100px);
    margin: 0 auto;
}

.breadcrumbs {
    max-width: var(--breakpoint-xl);
    margin: 24px auto 0;
    padding: 0 var(--spacing-md);
}

.breadcrumbs-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.95em;
}

.breadcrumbs-list li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.breadcrumbs-list li::after {
    content: '/';
    color: var(--color-text-secondary);
}

.breadcrumbs-list li:last-child::after {
    content: '';
}

.breadcrumbs-list a {
    color: inherit;
    text-decoration: none;
}

.breadcrumbs-list a:hover {
    color: var(--color-text);
    text-decoration: underline;
}