#vision { color: #FFF; }
#vision > .content-wrapper {}
#vision > .content-wrapper > .content {
    position: relative;
    display: flex; min-height: 600px; overflow: hidden;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    border-radius: 40px;
}
@media (min-width: 1100px)    { #vision > .content-wrapper > .content { padding:  50px 50px 200px } }
@media (max-width: 1099.99px) { #vision > .content-wrapper > .content { padding: 125px 25px  25px } }

/*-----------------------------------------------------------------------------------------------*/

#vision > .content-wrapper > .content > .background {
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
}
#vision > .content-wrapper > .content > .background > img {
    position: relative; z-index: 1;
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}
#vision > .content-wrapper > .content > .background:after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2;
    
    background-color: rgba(0,0,0,.3);
}
#vision > .content-wrapper > .content > .description { max-width: 800px; }
#vision > .content-wrapper > .content > .description > .hook {
    margin-bottom: 30px;
    
    font-weight: 700;
    font-style: italic;
    color: var(--main-color);
}
#vision > .content-wrapper > .content > .description > .text {
    line-height: 130%;
    font-weight: 700;
}
#vision > .content-wrapper > .content > .description > .text:before {
    content: '“';
    display: inline-block; height: 26px; overflow: hidden;
    margin-right: 26px;
    
    font-size: 70px;
    color: var(--main-color);
}
@media (min-width: 1100px) {
    #vision > .content-wrapper > .content > .description > .hook { font-size: 30px; }
    #vision > .content-wrapper > .content > .description > .text { font-size: 35px; }
    #vision > .content-wrapper > .content > .description > .text:before { line-height: 60px; }
}
@media (max-width: 1099.99px) {
    #vision > .content-wrapper > .content > .description > .hook { font-size: 20px; }
    #vision > .content-wrapper > .content > .description > .text { font-size: 25px; }
    #vision > .content-wrapper > .content > .description > .text:before { line-height: 65px; }
}

/*-----------------------------------------------------------------------------------------------*/

#vision > .content-wrapper > .content > .profile {
    position: absolute;
    display: flex;
    align-items: center;
    column-gap: 15px;
}
#vision > .content-wrapper > .content > .profile > .picture {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
#vision > .content-wrapper > .content > .profile > .picture:before {
    content: '';
    display: block;
    padding-top: 100%;
}
#vision > .content-wrapper > .content > .profile > .picture > img {
    position: absolute; top: 0; left: 0;
    display: block; height: 100%; width: 100%;
    
    object-fit: cover;
    object-position: center;
}
#vision > .content-wrapper > .content > .profile > .info {}
#vision > .content-wrapper > .content > .profile > .info > .name { font-weight: 700; }
#vision > .content-wrapper > .content > .profile > .info > .job { font-weight: 300; }
@media (min-width: 1100px) {
    #vision > .content-wrapper > .content > .profile {
        bottom: 50px; left: 50px;
        flex-direction: row;
    }
    #vision > .content-wrapper > .content > .profile > .picture { width: 100px; }
}
@media (max-width: 1099.99px) {
    #vision > .content-wrapper > .content > .profile {
        top: 25px; right: 25px;
        flex-direction: row-reverse;
    }
    #vision > .content-wrapper > .content > .profile > .picture { width: 75px; }
    #vision > .content-wrapper > .content > .profile > .info { text-align: right; }
}