:root {
    /* ===== Breakpoints ===== */
    --puntuacions-two-columns-breakpoint: 980px;
    --puntuacions-small-size-breakpoint: 470px;
}

#puntuacions-column-wrap {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    gap: 2rem;

    > div:last-child {
        display: none;
    }

    @media (width >= 980px /* var(--puntuacions-two-columns-breakpoint) */) {
        grid-template-columns: repeat(2, 28rem);
        justify-content: space-between;

        > div:last-child {
            display: block;
        }
    }
}

.edicio-de-puntuacio {
    display: flex;
    flex-direction: column;
    gap: 4rem;

    .grup-de-puntuacio {
        border-radius: 1rem;
        box-shadow: var(--shadow-sm);
        overflow: hidden;

        .nom-grup {
            text-align: center;
            padding: 0.5rem 0;
            font-weight: 500;

            > span {
                font-size: 1.25rem;
                line-height: calc(1.75 / 1.25);
                letter-spacing: 0.1em;
            }
        }

        .grup-wrap {
            background-color: var(--color-white);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
            padding: 1rem;

            @media (width >= 768px) {
                gap: 2rem;
                padding: 2rem;
            }

            .subgrup {
                margin: 0 auto;
                display: flex;
                gap: 0.25rem;

                .nom-subgrup {
                    width: 7.5rem;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }

                .subgrup-wrap {
                    display: flex;
                    flex-direction: column;
                    gap: 0.25rem;

                    .puntuacio-castell {
                        width: 100%;
                        background-color: var(--color-gray-lighter);
                        border-radius: 0.25rem;
                        display: flex;
                        padding: 0.25rem 0 0.25rem 0.5rem;

                        > .notacio {
                            width: 5rem;

                            @media (width >= 470px /* var(--puntuacions-small-size-breakpoint) */) {
                                width: 8rem;
                            }
                        }

                        > .carregat,
                        > .descarregat {
                            width: 3.75rem;
                            font-weight: 700;

                            @media (width >= 470px /* var(--puntuacions-small-size-breakpoint) */) {
                                width: 4rem;
                            }
                        }

                        > .carregat {
                            color: var(--color-castell-c-dark);
                        }

                        > .descarregat {
                            color: var(--color-castell-d-dark);
                        }
                    }
                }
            }

            > hr {
                width: 60%;
                height: 0.125rem;
                border: none;
                border-radius: 0.125rem;
                background-color: var(--color-gray-normal);
            }
        }
    }
}