.main {
    background: url(/img/main.webp) no-repeat center center;
    background-size: cover;
    padding: 180px 10px;
}
.main-grid {
    max-width: 770px;
    display: grid;
    justify-items: center;
    gap: 30px;
}
.main-grid h1 {
    font-family: Nearvana;
    font-size: 6rem;
    text-align: center;
    line-height: .9em;
}
.main-grid h2 {
    font-size: 1.5rem;
    text-align: center;
    max-width: 600px;
}
.main-grid a {
    font-size: 2rem;
}

@media only screen and (min-width: 360px) and (max-width: 570px) {

    .main-grid h1 {
        font-size: 4rem;
    }
    .main-grid h2 {
        font-size: 1.3rem;
    }
    
}

@media only screen and (min-width: 0px) and (max-width: 359px) {

    .main-grid h1 {
        font-size: 2.2rem;
    }
    .main-grid h2 {
        font-size: 1rem;
    }
    .main-grid a {
        font-size: 1.3rem;
    }
}