@import "mixin/media.pcss";
@import "mixin/typography.pcss";



.monster-data-grid-container {
    display: block;
    width: 100%;
    overflow-x: auto;
    background-color: var(--monster-bg-color-primary-2);
    color: var(--monster-color-primary-2);
    padding: 20px;
    box-sizing: border-box;

    & > div {
        display: grid;
    }

    @for $i from 1 to 50 {
        & .col-$(i) {
            grid-column: $(i);
            color: var(--monster-color-primary-1);
            background-color: var(--monster-bg-color-primary-1);
            border: none;
            padding: 0.4rem 0.4rem;
            display: flex;
            @mixin text;
        }
    }

    & .col-start-end {
        grid-column: 1 / -1;
    }

    & .header {
        font-weight: 600;
        font-size: 1rem;
        margin-bottom: 0.4rem;
        @mixin text;
    }


}