#hero{
    background:linear-gradient(0deg, rgba(24, 43, 83, 0.3), rgba(24, 43, 83, 0.3)), url(/img/rara-hero.webp);
    background-position: center;
    background-size: cover;
}

#hero .container{
    padding: 10rem 2rem;
}

#contacto h2{
    text-align: center;
    margin-left: 0;
    width: 12ch;
    margin: auto;
    margin-bottom: 1rem;
}


#contacto h2::before{
    content: '';
}

#contacto .content > span{
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    width: 100%;
    display: block;
    margin-bottom: .5rem;
}



@media screen and (min-width:760px) {
    #contacto{
        margin-top: 6rem;
    }

    #contacto h2::before{
        content: url(../img/svg/puntos-encabezados.svg);
        position: absolute;
        top: .2rem;
    } 
}

@media screen and (min-width:1200px) {
    #contacto .content > span{
       text-align: left;
       padding-left: 2rem;
    }

    #contacto h2{
        text-align: left;
        padding-left: 2rem;
        margin: 0;
        margin-bottom: 1rem;
    }

    #contacto h2::before{
        left: 0;
    }

    .social-ul{
        padding-left: 3rem;
    }

    
}