@layer components {
    .staldia-page-anchor-nav-list {
        --sp-columns: 1;
        grid-template-columns: repeat(var(--sp-columns), 1fr);
        --border: 2px solid rgb(var(--color-shadow-sand-rgb) / .5);
    }
    .staldia-page-anchor-nav-anchor {
        position: relative;
        width: 100%;
        padding: 1rem 3.5rem 1rem var(--layout-padding-horizontal-base);
        border-bottom: var(--border);
        transition: background .5s;
    }
    .staldia-page-anchor-nav-anchor.staldia-display-icon {
        padding: 1rem 2.5rem 1rem .5rem;
    }
    .staldia-page-anchor-nav-anchor.staldia-sp-border-top {
        border-top: var(--border);
    }
    .staldia-page-anchor-nav-anchor:before {
        content: "";
        display: block;
        position: absolute;
        width: 1.5px;
        height: calc(100% - 1rem);
        background: rgb(var(--color-shadow-sand-rgb) / .5);
        top: 50%;
        right: 100%;
        transform: translate(50%, -50%);
    }
    .staldia-page-anchor-nav-anchor.staldia-sp-no-border-left:before {
        display: none;
    }
    .staldia-page-anchor-nav-anchor:hover {
        background: rgb(var(--color-bg-sub-rgb) / .5);
    }
    .staldia-page-anchor-nav-icon-container {
        width: 3rem;
        height: 3rem;
    }
    .staldia-page-anchor-nav-label { min-height: 3rem; }
    .staldia-page-anchor-nav-arrow {
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        background: var(--color-accent);
        border-radius: 50%;
        top: 50%;
        right: var(--layout-padding-horizontal-base);
        transform: translateY(-50%);
    }
    .staldia-page-anchor-nav-anchor.staldia-display-icon > .staldia-page-anchor-nav-arrow {
        right: .5rem;
    }
    .staldia-page-anchor-nav-arrow:before {
        content: "";
        position: absolute;
        width: .33rem;
        height: .33rem;
        top: 50%;
        left: 50%;
        --border: 2px solid var(--color-text-on-accent);
        border-bottom: var(--border);
        border-right: var(--border);
        transform: translate(-50%, -75%) rotate(45deg);
    }
    @media (min-width: 900px) {
        .staldia-page-anchor-nav-list {
            --pc-columns: 3;
            grid-template-columns: repeat(var(--pc-columns), 1fr);
        }
        .staldia-page-anchor-nav-anchor,
        .staldia-page-anchor-nav-anchor.staldia-page-anchor-nav-anchor.staldia-display-icon {
            padding-left: 1.5rem;
            padding-right: 4rem;
        }
        .staldia-page-anchor-nav-anchor.staldia-sp-border-top { border-top: none; }
        .staldia-page-anchor-nav-anchor.staldia-sp-no-border-left:before { display: block; }
        .staldia-page-anchor-nav-anchor.staldia-pc-border-top { border-top: var(--border); }
        .staldia-page-anchor-nav-anchor.staldia-pc-no-border-left:before { display: none; }
        .staldia-page-anchor-nav-arrow,
        .staldia-page-anchor-nav-anchor.staldia-display-icon > .staldia-page-anchor-nav-arrow { right: 1.5rem; }
        .staldia-sd-points-content-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 6.25rem;
        }
    }
}