@import "_common.css";
@import "_menu.css";

@media (min-width: 481px) {
    main {
        grid-template-columns: repeat(9, 1fr);
    }
    #index h1 {
        grid-column: 1/5;
        grid-row: 1;
        align-self: end;
        margin: 0;
    }
    #index img {
        grid-column: 5/8;
        grid-row: 1;
    }
    #index div {
        grid-column: 9;
        grid-row: 1;
        align-self: end;
        text-align: right;
    }
    #index hr {
        grid-column: 1/8;
        grid-row: 2;
    }
    #index span {
        grid-column: 7;
        grid-row: 3;
        text-align: right;
    }
}

@media (max-width: 480px) {
    header nav ul {
        font-size: 14px;
    }
    header a {
        text-underline-offset: 10px;
    }
    main > div:first-of-type {
        margin-top: 30px;
    }
    #index h1 {
        grid-column: 1/6;
        font-size: 42px;
        line-height: 44px;
        margin-top: 0;
        margin-bottom: 50px;
    }
    #index img {
        grid-column: 1/6;
        grid-row: unset;
    }
    #index hr {
        grid-column: 1/6;
    }
    #index span {
        grid-column: 6/4;
        text-align: right;
    }
    #index div {
        grid-column: 1/6;
        display: flex;
        justify-content: space-between;
        margin-top: 90px;
    }
    #index div p {
        margin: 0;
        font-size: 16px;
    }
}