.breadcrumb-section {
    padding-inline: 0;
    padding-block: 0.625rem 0.25rem;
}

.breadcrumb-section .breadcrumb-list {
        padding: 0;
        margin: 0;
        list-style-type: none;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.625rem;
        overflow-x: auto;
        overflow-y: hidden;
        flex: 0 0 auto;
        padding-bottom: 0.625rem;
    }

.breadcrumb-section .breadcrumb-list .breadcrumb-item {
            display: flex;
            justify-content: start;
            align-items: end;
            gap: 0.5rem;
        }

.breadcrumb-section .breadcrumb-list .breadcrumb-item .breadcrumb-link,
            .breadcrumb-section .breadcrumb-list .breadcrumb-item .breadcrumb-current {
                text-decoration: none;
                font-size: 0.875rem;
                line-height: 1;
                color: var(--color-black);
            }

.breadcrumb-section .breadcrumb-list .breadcrumb-item .breadcrumb-link:hover {
                    text-decoration: underline;
                }

.breadcrumb-section .breadcrumb-list .breadcrumb-item .icon {
                transform: rotate(90deg);
                font-size: 0.5rem;
                line-height: 1.4;
            }

@media screen and (min-width: 64rem) {
    .breadcrumb-section {
        display: block;
    }
}

@media screen and (min-width: 96rem) {
    .breadcrumb-section {
        padding-block: 0.75rem 0.375rem;
    }
                .breadcrumb-section .breadcrumb-list .breadcrumb-item .breadcrumb-current,
                .breadcrumb-section .breadcrumb-list .breadcrumb-item .breadcrumb-link {
                    font-size: 0.9375rem;
                }
}