body > .grid {
    height: 100%;
}
.column {
    max-width: 450px;
}


/* Base style */

/* Larger than Mobile screen: 40.0rem (640px) */
@media (min-width: 40.0rem) { 
}

/* Larger than Tablet screen: 80.0rem (1280px) */
@media (min-width: 80.0rem) { 
    article#index {
        display: grid;
        grid-template-areas: 
            "header header"
            "result aside";
        grid-template-columns: 1fr 250px;
        grid-template-rows: auto 1fr;
        grid-row-gap: 10px;
        grid-column-gap: 10px;
    }
    article#regist {
        display: grid;
        grid-template-areas: 
            "header header"
            "regist .";
        grid-template-columns: 50% 1fr;
        grid-template-rows: auto 1fr;
        grid-row-gap: 10px;
        grid-column-gap: 30px;
    }
}

/* Larger than Desktop screen: 120.0rem (1920px) */
@media (min-width: 120.0rem) { 
}

/* css grid layout */
header { grid-area: header; }
aside { grid-area: aside; }
section#result { grid-area: result; }
section#regist { grid-area: regist; }