/* ==================================================
   ESTILOS GLOBALES: Section Highlight
   ================================================== */

div.section-highlinght__img-container {
    width: 100%;
    position: relative;
}

div.section-highlight__container-copy {
    position: absolute;
    z-index: -1;
    width: auto;
    border-radius: 0 16px 16px 0;
    background: #F3DBD7;
}

div.section-highlight__copy p, div.section-highlight__copy-text--subtitle p {
    font-family: Qalogre Fit !important;
    font-weight: 400;
}

div.section-highlight__copy-text {
    background: #F3DBD7;
    border-radius: 16px;
}

div.section-highlight__copy-text p {
    font-weight: 300;
}



/* ==================================================
   ESTILOS DESKTOP: Section Highlight
   ================================================== */

@media screen and (min-width: 1025px) {

    div.section-highlight__img {
        width: 70%;
        max-width: 46rem !important;
    }
    
    div.section-highlight__container-copy {
        margin-left: 6.8rem;
        margin-top: -5rem;
        padding: 1rem 1rem 1rem 4rem;
    }
    
    div.section-highlight__copy {
        width: 13rem;
        font-size: 2.2rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.4rem;
    }
    
    div.section-highlight__copy-text {
        width: 48rem;
        font-size: 1.7rem;
        padding: 1rem 0 .4rem 0 !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 40rem;
        font-size: 2.2rem;
    }
}



/* ==================================================
   ESTILOS MOBILE: Section Highlight
   ================================================== */

@media screen and (max-width: 767px) {

    div.section-highlinght__img-container {
        height: 78vw;
        max-height: 329px !important;
    }
    
    div.section-highlight__img {
        width: 142%;
        max-width: 34rem !important;
        position: absolute;
        left: 26%;
        transform: translateX(-26%);
    }
    
    div.section-highlight__container-copy {
        left: 49%;
        transform: translateX(-49%);
        margin-top: 12%;
        margin-left: 4.2rem;
        padding: 1rem 1rem 1rem 3rem;
        width: 70%;
        max-width: 12rem;
    }
    
    div.section-highlight__copy {
        font-size: 1.4rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.2rem;
    }

    div.section-highlight__copy-text {
        width: 100%;
        font-size: 1.3rem;
        padding: 1rem .8rem .5rem .8rem !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 93%;
        max-width: 22rem !important;
        font-size: 1.4rem;
    }
}



/* ==================================================
   ESTILOS TABLET: Section Highlight
   ================================================== */

@media screen and (min-width: 768px) and (max-width: 1024px) {

    div.section-highlight__img {
        width: 84%;
        max-width: 40rem !important;
    }
    
    div.section-highlight__container-copy {
        margin-left: 6.8rem;
        margin-top: -5.4rem;
        padding: 1rem 1rem 1rem 3rem;
    }
    
    div.section-highlight__copy {
        width: 12rem;
        font-size: 1.9rem;
    }
    
    span.section-highlight__text-accent {
        font-size: 1.3rem;
    }
    
    div.section-highlight__copy-text {
        width: 44rem;
        font-size: 1.6rem;
        padding: 1rem 0 .5rem 0 !important;
    }
    
    div.section-highlight__copy-text--subtitle {
        width: 34rem;
        font-size: 1.9rem;
    }
}