@import url("/css/fonts/fonts.css");
@import url("/css/global/global.css");
@import url("/css/components/header.css");
@import url("/css/components/footer.css");
@import url("/css/components/cards.css");
@import url("/css/components/formulario.css");

.hero {
    width: 100%;
    height: 30rem;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    max-width: 125rem;
}

.hero-about {
    background-image: url("/img/sobre-nosotros.jpg");
}

.hero-how-to-order {
    background-image: url("/img/como-hacer-un-pedido.jpg");
    background-position-y: -12.1875rem;
}

.hero-faq {
    background-image: url("/img/preguntas-frecuentes.jpg");
}

.hero-legal {
    background-image: url("/img/legal.jpg");
}

.hero h1 {
    text-align: left;
    position: absolute;
    bottom: 0;
    left: 3.125rem;
    font-size: 5rem;
    color: #FFF;
    text-shadow: 0 .125rem 5rem #000000d4;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 8rem;
    max-width: 125rem;
    width: 100%;
}

.content h2 {
    font-size: 2.2rem;
    margin: 3rem 0 0.5rem 0;
}

.content a {
    color: #04435F;
}

@media screen and (min-width: 64.0625rem) and (max-width: 85.375rem) {
    .hero-how-to-order {
        background-position-y: unset;
    }
}

@media screen and (min-width: 48rem) and (max-width: 64rem) {
    .hero-faq {
        background-position-x: center;
    }

    .hero-how-to-order {
        background-position-y: unset;
    }
}

@media screen and (min-width: 30.0625rem) and (max-width: 47.9375rem) {
    .hero h1 {
        text-align: center;
        left: 0;
        font-size: 4.5rem;
        width: 100%;
    }

    .hero-how-to-order {
        background-position-y: unset;
    }

    .hero-faq,
    .hero-condiciones,
    .hero-legal {
        background-position-x: right;
    }

    .hero-condiciones h1 {
        font-size: 3.8rem;
    }

    .content {
        padding: 2rem;
    }
}

@media screen and (max-width: 30rem) {
    .hero {
        height: 18rem;
    }

    .hero h1 {
        text-align: center;
        left: 0;
        font-size: 4rem;
        width: 100%;
    }

    .hero-how-to-order {
        background-position-y: unset;
    }

    .hero-faq,
    .hero-condiciones,
    .hero-legal {
        background-position-x: right;
    }

    .hero-condiciones h1 {
        font-size: 3.7rem;
    }

    .content {
        padding: 2rem;
    }
}