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

    --fr-1: min(80px, calc(var(--w-col) * 1));
    --fr-2: min(176px, calc(var(--w-col) * 2));
    --fr-3: min(273px, calc(var(--w-col) * 3));
    --fr-4: min(369px, calc(var(--w-col) * 4));
    --fr-5: min(465px, calc(var(--w-col) * 5));
    --fr-6: min(562px, calc(var(--w-col) * 6));
    --fr-7: min(658px, calc(var(--w-col) * 7));

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

    --h-1: 115px;
    --h-15: 172.5px;
    --h-2: 220px;
    --h-3: 320px;
    --h-4: 370px;
    --h-5: 440px;
}

/* min height */
.min-h-1 {
    min-height: var(--h-1);
}
.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);
}
/* data panel */
.data-filter {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.data-panel .d-grid, .data-panel .d-flex {
    gap: 1rem;
}
.data-panel .card {
}

@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: auto var(--fr-1);
}
.grid-column-auto-2fr {
    grid-template-columns: auto var(--fr-2);
}
.grid-column-auto-3fr {
    grid-template-columns: auto var(--fr-3);
}
.grid-column-auto-4fr {
    grid-template-columns: auto var(--fr-4);
}
.grid-column-auto-5fr {
    grid-template-columns: auto var(--fr-5);
}
.grid-column-auto-6fr {
    grid-template-columns: auto var(--fr-6);
}
.grid-column-1fr-auto {
    grid-template-columns: var(--fr-1) auto;
}
.grid-column-2fr-auto {
    grid-template-columns: var(--fr-2) auto;
}
.grid-column-3fr-auto {
    grid-template-columns: var(--fr-3) auto;
}
.grid-column-4fr-auto {
    grid-template-columns: var(--fr-4) auto;
}
.grid-column-5fr-auto {
    grid-template-columns: var(--fr-5) auto;
}
.grid-column-6fr-auto {
    grid-template-columns: var(--fr-6) auto;
}

/* 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-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;
}