@charset "utf-8";

@media screen and (max-width: 1144px) {
    #introduction {
        background-image: url(../../../imagens/botox-fundo.jpg);
        background-position: 0em 0em;
    }

    #intro-titulo {
        content: url(../../../imagens/botox-titulo.svg)
    }

    #sobre-image {
        content: url(../../../imagens/botox-imagem1.webp);
    }
    
    .aed-imagem {
        background-size: cover;
        background-position: center;
    }

    .aed-imagem::before {
        content: "Antes";
        display: inline-block;
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-100%);
        font-size: 30px;
        color: white;
        text-shadow: 0px 0px 3px black;
    }

    .aed-imagem::after {
        content: "Depois";
        display: inline-block;
        position: relative;
        top: 100%;
        left: 50%;
        transform: translate(-130%,-100%);
        font-size: 30px;
        color: white;
        text-shadow: 0px 0px 3px black;
    }

    #aed-imagem1 {
        background-image: url(../../../imagens/botox-antes-e-depois.jpg);
    }

    #aed-imagem2 {
        background-image: url(../../../imagens/botox-antes-e-depois2.jpg);
    }
}

@media screen and (min-width: 760px) and (max-width: 1144px) {
    #introduction {
        background-position: 0em -15em;
    }
}

@media screen and (min-width: 1145px) {
    #introduction {
        background-image: url(../../../imagens/botox-fundo.jpg);
        background-position: 0 -30vw;
    }

    #intro-titulo {
        content: url(../../../imagens/botox-titulo.svg);
    }

    #intro-text {
        left: -5em;
    }

    #sobre-image {
        content: url(../../../imagens/botox-imagem1.webp);
    }

    #aed-imagem1 {
        background-image: url(../../../imagens/botox-antes-e-depois.jpg);
    }

    #aed-imagem2 {
        background-image: url(../../../imagens/botox-antes-e-depois2.jpg);
    }

    .aed-imagem::before {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-100%);
    }

    .aed-imagem::after {
        top: 100%;
        left: 50%;
        transform: translate(-130%,-100%);
    }
}