﻿.stock-quotes-charts {
    border-collapse: collapse;
    width: 100%;
}

@media (width >= 37.5rem) {
    .stock-quotes-charts__wrapper {
        overflow-x: auto;
    }


    .stock-quotes-charts thead th {
        font-size: var(--heading-caption-size);
        font-weight: 400;
        text-align: left;
        padding-block-end: 1rem;
        white-space: nowrap;
    }

    .stock-quotes-charts tr {
        border-block-end: solid 1px var(--color-gray-200);
    }

    .stock-quotes-charts tbody td {
        font-size: var(--button-font-size);
        padding-block: 1rem;
        white-space: nowrap;
    }

        .stock-quotes-charts thead th:not(:last-child),
        .stock-quotes-charts tbody td:not(:last-child) {
            padding-inline-end: 1.5rem;
        }
}

@media (width < 37.5rem) {
    .stock-quotes-charts thead {
        display: none;
    }

    .stock-quotes-charts,
    .stock-quotes-charts tbody {
        display: contents;
    }

        .stock-quotes-charts tbody tr {
            display: grid;
            grid-template-columns: repeat(3, auto);
            gap: 1.5rem 1rem;
        }

        .stock-quotes-charts tbody td {
            font-size: var(--button-font-size);
        }

            .stock-quotes-charts tbody td::before {
                content: attr(data-label);
                display: block;
                font-size: 0.75rem;
                margin-block-end: 0.5rem;
            }

            .stock-quotes-charts tbody td:nth-child(1) {
                grid-column: 1 / -1;
            }

                .stock-quotes-charts tbody td:nth-child(1)::before {
                    font-weight: 700;
                    font-size: var(--button-font-size);
                    padding-block-end: 1.5rem;
                    border-block-end: solid 1px var(--color-gray-200);
                    margin-block-end: 0;
                }

                .stock-quotes-charts tbody td:nth-child(1) span {
                    display: none;
                }

            .stock-quotes-charts tbody td:nth-child(2),
            .stock-quotes-charts tbody td:nth-child(3) {
                display: none;
            }
}
