/* スモール */
@media (min-width: 0px) {
    main {
        height                    : calc(100vh - var(--header-hight) - var(--footer-hight));

        overflow                  : scroll;
    }

    #content {
        width                     : 100%;
        height                    : 100%;

        background                : #ffffff;
    }

    #content h3 {
        padding                   : 8px 0 0 16px;

        color                     : #555555;
    }
    
    #grid-content {
        display: grid;
        grid-template-columns     : repeat(2, auto-fit, minmax(136px, 1fr));
        grid-template-rows        : repeat(8, 136px);
        gap                       : 16px;
        grid-template-areas       : "a a"
                                    "a a"
                                    "b c"
                                    "b c"
                                    "d d"
                                    "e e"
                                    "f f"
                                    "g h";

        margin                    : 8px 16px 8px 16px;
    }

    #grid-content section {
        border                    : 3px solid gray;

        background                : #7fffff;
    }

    #panel1{
        grid-area: a;
    }

    #panel2{
        grid-area: b;
    }

    #panel3{
        grid-area: c;
    }

    #panel4{
        grid-area: d;
    }

    #panel5{
        grid-area: e;
    }

    #panel6{
        grid-area: f;
    }

    #panel7{
        grid-area: g;
    }

    #panel8{
        grid-area: h;
    }
}

/* ミドル */
@media (min-width: 651px) {
    main {
        height                    : calc(100vh - var(--header-hight) - var(--footer-hight) - var(--nav-bar-hight));
    }
    
    #grid-content {
        grid-template-columns     : repeat(3, auto-fit, minmax(136px, 1fr));
        grid-template-rows        : repeat(6, 136px);
        grid-template-areas       : "a a b"
                                    "a a b"
                                    "c d d"
                                    "c e e"
                                    "f f g"
                                    "h h h";
    }
}

/* ラージ */
@media (min-width: 961px) {
    #grid-content {
        grid-template-columns     : repeat(4, auto-fit, minmax(136px, 1fr));
        grid-template-rows        : repeat(4, 136px);
        grid-template-areas       : "a a b c"
                                    "a a b c"
                                    "d d f f"
                                    "e e g h";
    }
}