#bloque_historia{
    display: flex;
    flex-direction: row;
    height: auto;
    width: 100%;
    align-items: center;
    padding: 20px 0;
}

#fraseDonBosco{
    width: 50%;
    height: auto; 
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    position: relative;
}

#fraseDonBosco img{
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 1/1;
}

#frase{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    position: absolute;
    bottom: 5%;
    text-align: center;
    left: 0%; 
    text-align: center;
    padding: 10px 0;
}

#frase>p{
    color: var(--color-text-dark);
    width: 95%;
}

#autorFrase{
}

#resumenHistorico{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 20px;
}
#resumenHistorico>h1, #resumenHistorico>h2{
    color: var(--color-text-dark);
    width: 100%;
}
#resumenHistorico>h2{
    color: var(--color-text-dark);
    width: 100%;
}

#resumenHistorico>p{
    color: var(--color-text-dark);
    width: 100%;
}

@media screen and (max-width: 968px) {
    
    #frase{
        bottom: -10%;
    }
    #fraseDonBosco img{
        width: 60%;
        height: auto;
        aspect-ratio: 1/1;
    }

    #bloque_historia{
        flex-direction: column;
        height: auto;
        align-items: center;
        padding-block: 20px;
    }

    #fraseDonBosco{
        width: 100%;
        height: auto;
        margin-block: 70px;
        overflow: visible;
    }

    #resumenHistorico{
        width: 90%;
        height: auto;
    }
    #resumenHistorico>h1, #resumenHistorico>h2{
    }
    #resumenHistorico>h2{
    }

    #frase{
        gap: 10px;
    }
    #frase>p{
    }
}


@media screen and (max-width: 500px) {
    #frase{
        bottom: -30%;
    }
}