@layer heroicc.core {
    heroicc-deck-details {
        position: relative;
        display: flex;
        flex-direction: column-reverse;
        gap: 2em;

        > :has(> heroicc-deck) {
            display: grid;
            align-self: center;
            width: 100%;
            max-width: 350px;

            heroicc-deck {
                margin-block-end: 1em;
            }
        }

        @container (width > 850px) {
            display: grid;
            grid-template-columns: auto 350px;

            > :has(> heroicc-deck) {
                position: sticky;
                top: 1em;
                margin-block-start: 0;
                align-self: start;
            }
        }

        div:has(> ul) {
            container-type: inline-size;

            h3:first-of-type {
                margin-block-start: 0;
            }

            > ul {
                @container (width > 550px) {
                    --columns: 4;
                }
            }
        }

        .card-group {
            position: relative;
            display: grid;
            container-type: inline-size;
            align-content: start;
            width: 100%;

            span {
                color: var(--text-color-soften);
                font-size: var(--font-step--1);
                margin-block-end: 0.25em;
            }

            heroicc-card {
                position: relative;
                max-width: 100%;
            }

            heroicc-card:not(:first-of-type) {
                margin-block-start: calc(
                    (100cqi / calc(var(--card-aspect-ratio))) * -0.935
                );
            }
        }
    }
}