.main {
    background: url(/img/mainfundo.webp)no-repeat center center;
    background-size: cover;
}
.main-grid {
    padding: 150px 10px;
    display: grid;
    grid-gap: 20px;
}
.main-title > h1 {
    font-weight: 900;
    font-size: 2rem;
}
.main-grid p {
    color: #fff;
    font-size: 1.1rem;
    max-width: 750px;
}
.main-grid p > span {
    color: #FDCF1A;
    text-shadow: 0px 0px 5px #000,
    0px 0px 5px #000,
    0px 0px 5px #000,
    0px 0px 5px #000;
}
.main-grid a {
    background-color: #FDCF1A;
    padding: 12px 115px;
    border: 3px solid #000;
    max-width: fit-content;
    font-size: 1.25rem;
    transition: .3s;
}
.main-grid a:hover {
    box-shadow: 3px 3px 1px #000 inset, 
    -3px -3px 1px #000 inset,
    3px -3px 1px #000 inset,
    -3px 3px 1px #000 inset;
}

@media only screen and (min-width:370px) and (max-width:565px) {

    .main-grid a {
        padding: 12px 50px;
        font-size: 1rem;
    }
    .main-grid p {
        font-size: .95rem;
    }

    .main-title > h1 {
        font-size: 1.5rem;
    }
    
}
@media only screen and (min-width:0px) and (max-width:369px) {

    .main-grid a {
        padding: 12px 15px;
        font-size: .9rem;
    }
    .main-grid p {
        font-size: .85rem;
    }

    .main-title > h1 {
        font-size: 1.3rem;
    }
    
}