@layer components {

    .acc {
        border-top: 1px solid var(--c-line);
    }

    .acc__summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--s-4);
        min-height: 56px;
        padding-block: var(--s-3);
        font-size: var(--t-sm);
        font-weight: 500;
        letter-spacing: .04em;
        user-select: none;
    }

    .acc__summary:hover {
        color: var(--c-accent);
    }

    .acc[open] > .acc__summary .icon__v {
        transform: scaleY(0);
    }

    .acc__panel {
        display: grid;
        gap: var(--s-3);
        max-width: 68ch;
        padding-bottom: var(--s-5);
        color: var(--c-muted);
    }

    .acc__list,
    .acc__steps {
        display: grid;
        gap: var(--s-2);
        padding-left: 1.2em;
    }

    .acc__list {
        list-style: disc;
    }

    .acc__steps {
        list-style: decimal;
    }

    .acc__inci {
        font-size: var(--t-xs);
        line-height: 1.7;
    }

    .acc--lg > .acc__summary {
        min-height: 68px;
        font-family: var(--f-display);
        font-size: var(--t-lg);
        font-weight: var(--fw-display);
        letter-spacing: 0;
        line-height: 1.25;
    }

    .acc--lg > .acc__panel {
        font-size: var(--t-base);
    }

    .acc--lg:last-child {
        border-bottom: 1px solid var(--c-line);
    }

}