#grid {
    display:                            grid;
    height:                             100vh;
    grid-template-columns:              1fr auto 1fr;
    grid-template-rows:                 1fr auto 1fr;
    grid-template-areas:                ". . ."
                                        ". wrap ."
                                        ". . .";
}

#wrap {
    grid-area:                          wrap;
    display:                            grid;
    place-items:                        center;
}

#wrap,
#wrap > * {
    -webkit-touch-callout:              none;
    -webkit-user-select:                none;
    -khtml-user-select:                 none;
    -moz-user-select:                   none;
    -ms-user-select:                    none;
    user-select:                        none;
}

.logo {
    height:                             100px;
    margin-bottom:                      80px;
}

.link {
    width:                              300px;
    height:                             68px;
    padding-top:                        25px;
    margin-bottom:                      28px;
    border-radius:                      8px;
    background:                         #262626;
    font-weight:                        500;
    font-size:                          15px;
    letter-spacing:                     2px;
    text-align:                         center;
    text-transform:                     uppercase;
    cursor:                             pointer;
}

.link:hover {
    background:                         #404040;
}



@media only screen and (max-width: 480px) {

    #grid {
        height:                         unset;
        grid-template-rows:             80px auto 120px;
    }

    .logo {
        height:                         80px;
    }

    .link:hover {
        background:                     #262626;
    }

}