/* Grid */
:root {
    --w-col: 120px;
    --w-col: calc((100vw - 220px - 48px) / 12);

    --fr-1: min(120px, calc(var(--w-col) * 1));
    --fr-2: min(256px, calc(var(--w-col) * 2));
    --fr-3: min(399px, calc(var(--w-col) * 3));
    --fr-4: min(528px, calc(var(--w-col) * 4));
    --fr-5: min(666px, calc(var(--w-col) * 5));
    --fr-6: min(814px, calc(var(--w-col) * 6));
    --fr-7: min(944px, calc(var(--w-col) * 7));

    --w-2: 176px;
    --w-3: 273px;
    --w-4: 369px;
    --w-5: 465px;
    --w-8: 754px;

    --h-1: 120px;
    --h-1-5: 180px;
    --h-2: 240px;
    --h-3: 320px;
    --h-4: 380px;
    --h-5: 480px;
    --h-6: 600px;
    --h-7: 700px;
    --h-8: 820px;
}
.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 0.75rem;
}

/* data panel */
.data-filter {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.data-panel {
    /* min-height: 800px; */
}
.data-panel .row .card {
    height: 100%;
}
.data-panel .row .col {
    display: flex;
    flex-direction: column;
    gap: 0.5rem 1rem;
}
.data-panel .row .col .card {
    height: auto;
    flex-grow: 1;
}
.data-panel .row {
    margin-bottom: 1rem;
}
.grid {
    display: grid;
}
.d-grid,
.grid {
    min-width: 0;
    min-height: 0;
    gap: 0.75rem;
}
.d-grid > *,
.grid > * {
    min-width: 0;
}
/* min height */
.min-h-1 {
    min-height: var(--h-1);
}
.min-h-1-5 {
    min-height: var(--h-1-5);
}
.min-h-2 {
    min-height: var(--h-2);
}
.min-h-3 {
    min-height: var(--h-3);
}
.min-h-4 {
    min-height: var(--h-4);
}
.min-h-5 {
    min-height: var(--h-5);
}
.min-h-6 {
    min-height: var(--h-6);
}
.min-h-7 {
    min-height: var(--h-7);
}
.min-h-8 {
    min-height: var(--h-8);
}

@media (max-width: 992px) {
    .d-grid {
        display: block;
    }
}

.d-grid .col {
    gap: inherit;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1rem;
}
.d-grid > .col > div {
    flex-grow: 1;
}

/* grid column */
.grid-column-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-column-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-column-4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-column-5 {
    grid-template-columns: repeat(5, 1fr);
}
.grid-column-6 {
    grid-template-columns: repeat(6, 1fr);
}

/* grid column 2 */
.grid-column-auto-1fr {
    grid-template-columns: 1fr var(--fr-1);
}
.grid-column-auto-2fr {
    grid-template-columns: 1fr var(--fr-2);
}
.grid-column-auto-3fr {
    grid-template-columns: 1fr var(--fr-3);
}
.grid-column-auto-4fr {
    grid-template-columns: 1fr var(--fr-4);
}
.grid-column-auto-5fr {
    grid-template-columns: 1fr var(--fr-5);
}
.grid-column-auto-6fr {
    grid-template-columns: 1fr var(--fr-6);
}
.grid-column-1fr-auto {
    grid-template-columns: var(--fr-1) 1fr;
}
.grid-column-2fr-auto {
    grid-template-columns: var(--fr-2) 1fr;
}
.grid-column-3fr-auto {
    grid-template-columns: var(--fr-3) 1fr;
}
.grid-column-4fr-auto {
    grid-template-columns: var(--fr-4) 1fr;
}
.grid-column-5fr-auto {
    grid-template-columns: var(--fr-5) 1fr;
}
.grid-column-6fr-auto {
    grid-template-columns: var(--fr-6) 1fr;
}

/* grid row */
.grid-row-h-1 {
    grid-template-rows: var(--h-1);
}
.grid-row-h-15 {
    grid-template-rows: var(--h-15);
}
.grid-row-h-2 {
    grid-template-rows: var(--h-2);
}
.grid-row-h-3 {
    grid-template-rows: var(--h-3);
}
.grid-row-h-4 {
    grid-template-rows: var(--h-4);
}
.grid-row-h-5 {
    grid-template-rows: var(--h-5);
}
.grid-row-h-6 {
    grid-template-rows: var(--h-6);
}
.grid-row-h-full {
    grid-template-rows: 100%;
}
/* grid type */
.grid-type-1 {
    grid-template-columns: auto var(--fr-4);
}
.grid-type-1 > div:nth-of-type(1) {
    grid-row-start: 1;
    grid-row-end: 3;
}

.grid-type-2 {
    grid-template-columns: var(--fr-3) auto var(--fr-3);
}

.grid-type-3 {
    grid-template-columns: var(--fr-3) auto var(--fr-3);
    grid-template-rows: 226px auto;
}
.grid-type-3 > div:nth-of-type(3) {
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 3;
}
.grid-type-3 > div:nth-of-type(4) {
    grid-column-start: 1;
    grid-column-end: 3;
}
.grid-type-3-2 {
    grid-template-columns: 1fr 1.4fr;
}
.grid-type-3-2 > div:nth-of-type(1) {
    grid-row-start: 1;
    grid-row-end: 3;
}
.grid-type-4 {
    grid-template-columns: auto var(--fr-4);
}

.grid-type-5 {
    grid-template-columns: auto var(--fr-4) var(--fr-3);
}
.grid-type-5-2 {
    grid-template-columns: var(--fr-3) auto;
}
.grid-type-5-3 {
    grid-template-columns: 1fr 1.4fr;
}
.grid-type-5-3 > div:nth-of-type(3) {
    grid-column-start: 1;
    grid-column-end: 3;
}
.grid-type-6 {
    grid-template-columns: 1fr 1fr;
}

.grid-column-5fr-4fr-1fr {
    grid-template-columns: 5fr 4fr 1fr;
}

.grid-column-4fr-4fr-2fr {
    grid-template-columns: 4fr 4fr 2fr;
}

.d-flex.flex-column > .card {
    flex: 1;
}