/* スモール */
@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(auto-fit, minmax(176px, 1fr));
        grid-auto-rows            : 176px;
        gap                       : 16px;

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

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

        background            : #7fffff;
    }
}

/* ミドル */
@media (min-width: 651px) {
    main {
        height                    : calc(100vh - var(--header-hight) - var(--footer-hight) - var(--nav-bar-hight));
    }
}

/* ラージ */
@media (min-width: 961px) {
}