.main-cont{
    height: 35vh;
    position: relative;
    color: var(--mustard);
    background-size: cover;
    background-position: center;
}

h1.title{
    color: var(--mustard);
    z-index: 3;
    font-size: 2.1rem;
}

.main-cont-overlay{
    background: var(--background-black);
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 1;
}
.title-cont::before{
    display: none;
}


b{
    display: inline-block;
}


.contact-card{
    --icon-size: 13vmin;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
    border-radius: 10px;
    margin-top: 2vh;
    margin-bottom: 4vh;
    text-decoration: none;
    color: inherit;
    padding: 0 10vw;
}
.contact-card:hover{
    color: inherit;
}

.contact-card .svg-cont{
    height: var(--icon-size);
    width: var(--icon-size);
}
.contact-card h2{
    margin-top: 3vh;
    margin-bottom: 3vh;
    font-size: 1.3rem;
}
.contact-card div{
    text-align: center;
}






@media screen and (min-aspect-ratio: 1/1) {

    .main-cont-overlay{
        background: linear-gradient(-60deg, var(--background-black) 50%, transparent 50%);
    }
    .main-cont{
        height: 40vh;
        background-position: 0 -55vh;
        background-repeat: no-repeat;
    }

    .contact-card{
        --icon-size: 7vmin;
        min-height: 40vh;
        margin-top: 2vh;
        margin-bottom: 4vh;
        padding: 0 3vw;
    }
    .contacto .h2{
        padding: 0;
    }
}