.barometre-table {
    border-collapse: separate;
    border-spacing: 0.25rem;
    max-width: 32rem;
    caption-side: top;

    caption, td {
        border-radius: 0.375rem;
    }

    caption {
        padding: 0.125rem 0;
        background-color: var(--color-primary);
        color: var(--color-white);
        font-weight: 400;
        font-size: 0.875rem;
        line-height: calc(1.25 / 0.875);
        letter-spacing: 0.1em;
        margin: 0 0.25rem;
        text-align: center;
    }

    tbody {
        tr {
            td {
                font-size: 0.875rem;
                line-height: calc(1.25 / 0.875);

                @media (width >= 898px) {
                    font-size: 1rem;
                    line-height: 1.5;
                }
            }

            .position-cell {
                position: relative;
                background-color: var(--color-gray-light);
                min-width: 2.25rem;

                @media (width >= 898px) {
                    min-width: 2.75rem;
                }

                span.delta {
                    position: absolute;
                    top: 50%;
                    left: 0.125rem;
                    line-height: 0;
                    transform: translateY(-50%);

                    @media (width >= 898px) {
                        left: 0.25rem;
                    }
                }

                span.position {
                    position: absolute;
                    top: 50%;
                    right: 0.25rem;
                    font-size: 0.75em;
                    line-height: calc(1 / 0.75);
                    text-align: right;
                    transform: translateY(-50%);

                    @media (width >= 898px) {
                        font-size: 0.875rem;
                        line-height: calc(1.25 / 0.875);
                    }
                }
            }

            .colla-cell {
                padding-right: 0.5rem;
                padding-left: 0.25rem;
            }

            .score-cell {
                padding: 0 0.25rem;
                background-color: var(--color-gray-light);
                color: var(--color-gray-darkest);
                font-weight: 500;
                text-align: right;
                justify-content: center;
                display: none;

                @media (width >= 898px) {
                    padding: 0 1rem;
                }

                @media (width >= 30rem) {
                    display: table-cell;
                }
            }

            .castells-group-cell {
                box-shadow: var(--shadow-xs);

                &.empty {
                    background-color: var(--color-white);
                    opacity: 0.35;
                }

                &.carregat {
                    background-color: var(--color-castell-c);
                    color: var(--color-gray-darkest);
                    font-style: italic;
                }

                & > div {
                    display: flex;
                    flex-direction: column;
                    padding: 0 0.25rem;
                    text-align: center;
                    min-width: 3.36rem;

                    @media (width >= 40rem) {
                        min-width: 4.32rem;
                    }

                    .barometre-new {
                        line-height: 1;
                        font-size: 0.5rem;
                        font-weight: 700;
                        padding-bottom: 0.125rem;
                        text-transform: uppercase;

                        @media (width >= 40rem) {
                            font-size: 0.6rem;
                        }
                    }
                }
            }
        }
    }
}