header span {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 5px;
}

main {
    display: grid;
    grid-template:
        "a b" auto
        "c d" auto / 1fr 1fr
    ;
    justify-items: center;
    justify-content: space-evenly;
    gap: var(--text-spacing);
    height: calc(92dvh - (3 * var(--text-spacing)) - 2px);
    margin: var(--text-spacing);

    .chart-container {
        height: calc((42dvw - (1.5 * var(--text-spacing))) / 2);
        width: calc(42dvw - (1.5 * var(--text-spacing)));

        line-chart { height: 100%; }
    }
}

@media (320px <= width <= 480px) and (orientation: portrait) {
    header span {
        flex-flow: row wrap;
    }

    main {
        grid-template: 
            "a" auto
            "b" auto
            "c" auto
            "d" auto / 100%
        ;

        .chart-container {
            min-width: unset;
            height: calc(1fr - (2 * var(--text-spacing)));
            width: calc(100% - (2 * var(--text-spacing)));
        }
    }
}