@layer heroicc.core {
    heroicc-release {
        container-type: inline-size;

        header {
            text-wrap: balance;
            text-wrap: pretty;
            align-content: start;

            h1 {
                margin: 0;
            }
        }

        .statistics {
            display: grid;
            grid-template-rows: repeat(4, auto);
            gap: 1em;

            @container (width >= 380px) {
                grid-template-columns: 1fr 1fr;
                grid-template-rows: auto 1fr auto auto;
                grid-template-areas:
                    "header header"
                    "metadata rarities"
                    "colors categories";

                header {
                    grid-area: header;
                }

                > dl {
                    &:has(img) {
                        grid-area: metadata;
                    }

                    &:has(img) + & {
                        grid-area: rarities;
                        align-self: end;
                    }

                    &:has(img) + & + & {
                        grid-area: colors;
                    }

                    &:has(img) + & + & + & {
                        grid-area: categories;
                    }
                }
            }

            @container (width >= 500px) {
                grid-template-columns: 1fr 1fr 1fr;
                grid-template-rows: auto 1fr auto;
                grid-template-areas:
                    "header header header"
                    "metadata metadata metadata"
                    "rarities colors categories";

                > dl {
                    &:has(img) {
                        justify-self: center;
                    }
                    &:has(img) + & {
                        align-self: revert;
                    }
                }
            }

            @container (width >= 850px) {
                grid-template-columns: 1fr 1fr 1fr calc(360px - 1em);
                grid-template-rows: auto auto;
                grid-template-areas:
                    "header header header metadata"
                    "rarities colors categories metadata";

                > dl {
                    &:has(img) {
                        justify-self: revert;
                    }
                }
            }

            > dl {
                display: grid;

                &:has(img) {
                    position: relative;
                    grid-template-columns: auto 1fr;
                    grid-template-rows: auto fit-content;
                    grid-template-areas:
                        "product-image product-image"
                        ". language";
                    align-self: end;
                    padding: 1em;
                    border-radius: 1em;
                    background: oklch(
                        from var(--theme-color) calc(l * 1.1) c h
                    );
                    box-shadow:
                        inset 0px 1px 1px 0px oklch(1 0 0 / 0.125),
                        oklch(from var(--theme-color) calc(l * 0.9) c h) 0px 0px
                            24px;

                    dd:has(img) {
                        justify-self: center;
                        grid-area: product-image;
                    }

                    dd {
                        align-self: end;
                    }
                }
            }

            dd:has(.pill) {
                justify-self: end;
                align-self: end;
            }
        }

        dl:has(dl) {
            display: grid;
            gap: 0.5em;
            grid-template-rows: auto 1fr;
            align-content: start;

            > dt {
                font-weight: 900;
                font-style: italic;
                text-align: center;
            }

            > dd {
                padding: 1em;
                border-radius: 1em;
                background: oklch(from var(--theme-color) calc(l * 1.1) c h);
                box-shadow:
                    inset 0px 1px 1px 0px oklch(1 0 0 / 0.125),
                    oklch(from var(--theme-color) calc(l * 0.9) c h) 0px 0px
                        24px;
            }
        }

        dd > dl {
            display: grid;
            grid-template-columns: auto auto;
            font-size: var(--font-step--1);

            dt {
                color: var(--text-color-soften);
            }

            dd {
                justify-self: end;
            }
        }

        dd:has(> img) {
            display: grid;
            align-content: center;
        }

        img {
            display: grid;
            border-radius: 5px;
            object-fit: contain;
            width: auto;
            height: auto;
            max-width: 100%;
            margin-block-end: 1em;
        }

        a[target] {
            display: block;
        }
    }
}