.main {
    padding: 100px 10px;
}
.main-grid {
    display: grid;
    justify-items: center;
    max-width: 932px;
    gap: 30px;
}
.main-grid > span {
    width: 80px;
    height: 1px;
    background-color: var(--main-cor);
    display: block;
}

@media only screen and (min-width: 400px) and (max-width: 640px) {

    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1rem;
    }

    .main {
        padding: 50px 10px 100px;
    }
    
}

@media only screen and (min-width: 315px) and (max-width: 399px) {

    h1 {
        font-size: 1.5rem;
    }
    h2 {
        font-size: 1rem;
    }

    .main {
        padding: 50px 10px 100px;
    }

    .btn {
        padding: 16px 20px;
        font-size: 1.25rem;
    }
    
}

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

    h1 {
        font-size: 1.25rem;
    }
    h2 {
        font-size: 1rem;
    }

    .main {
        padding: 50px 10px 100px;
    }

    .btn {
        padding: 12px 15px;
        font-size: 1.15rem;
        animation: none;
        gap: 6px;
    }
    
}