#breadcrumb {
    padding-top: var(--space-8);
    margin-bottom: var(--space-32);
    position: relative;
    text-align: center;
}

    #breadcrumb::before {
        width: 10em;
        height: 1px;
        background-color: #f1f1f1;
        content: '';
        position: absolute;
        left: 50%;
        top: var(--space-0);
        transform: translateX(-50%);

        /* margin-top: var(--space-16); */
    }

    @media (max-width: 599px) {#breadcrumb {
        display: none
}
    }

    @media (min-width: 600px) {
        
    }

    #breadcrumb ol {
        list-style: none;   
        padding-left: 0;
        padding-top: var(--space-16);
        display: block;
        margin-bottom: var(--space-0);
        margin-top: var(--space-zero);
    }

    #breadcrumb ol li {
            display: inline-block;
            font-size: var(--step--1);
        }

    @media (min-width: 600px) {

    #breadcrumb ol li {
                font-size: var(--step-1)
        }
            }

    @media (min-width: 1280px) {

    #breadcrumb ol li {
                font-size: var(--step-0)
        }

            }

    #breadcrumb ol li a {
                font-size: var(--step--1);
                text-decoration: underline;
            }

    @media (min-width: 600px) {

    #breadcrumb ol li a {
                    font-size: var(--step-1)
            }
                }

    @media (min-width: 1280px) {

    #breadcrumb ol li a {
                    font-size: var(--step-0)
            }

                }

    #breadcrumb ol li::after {
                content: '/';
                color: #767676;

            }

    #breadcrumb ol li:last-of-type::after {
                    content: unset;
                }