.esg {}

.esg .banner {}
.esg .banner .wp-block-column:last-child h1 {
    @media( max-width: 680px ){
        & {
            font-size: 28px !important;
        }
    }
}

.esg .timeline {}

.esg .valores {}
.esg .valores .wp-block-column:first-child h2 {
    @media( max-width: 680px ){
        & {
            font-size: 28px !important;
        }
    }
}

.esg .matriz {}
.esg .matriz .wp-block-column:first-child h2 {
    @media( max-width: 680px ){
        & {
            font-size: 28px !important;
        }
    }
}

.esg .estrategia {}
.esg .estrategia .wp-block-column:last-child .wp-block-group {
    @media( max-width: 560px ){
        & {
            padding: 32px 24px !important;
        }
    }
}
.esg .estrategia h2 {
    @media( max-width: 560px ){
        & {
            font-size: 24px !important;
        }
    }
}

.esg .maturidade {
    @media( max-width: 560px ){
        & {
            padding: 32px 24px !important;
        }
    }
}
.esg .maturidade h2 {
    @media( max-width: 560px ){
        & {
            font-size: 24px !important;
        }
    }
}

.esg .relatorio {
    @media( max-width: 680px ){
        & {
            padding: 32px 24px !important;
        }
    }
}
.esg .relatorio .wp-block-column:last-child {
    @media( max-width: 680px ){
        & {
            padding: 0 !important;
        }
    }
}
.esg .relatorio .wp-block-column:last-child h2 {
    @media( max-width: 680px ){
        & {
            font-size: 24px !important;
        }
    }
}
.esg .relatorio .wp-block-column:last-child p + .wp-block-group {
    @media( max-width: 680px ){
        & {
            flex-direction: column;
        }
    }
}


.esg .topico {
    @media( max-width:680px ){
        & {
            padding: 32px 24px !important;
        }
    }
}
.esg .topico .qct-esg-list-item-title {
    @media( max-width: 680px ){
        & {
            flex-direction: column;
            align-items: flex-start;
            gap: 8px;
            margin-bottom: 16px;
        }
    }
}
.esg .topico .qct-esg-list-item-title figure {
    @media( max-width: 680px ){
        & {
            max-width: max-content;
        }
    }
}
.esg .topico .qct-esg-list-item-title figure img {}
.esg .topico .qct-esg-list-item-title h2 {
    @media( max-width: 680px ){
        & {
            font-size: 24px !important;
        }
    }
}
.esg .topico .qct-esg-list-item-title + .wp-block-group {
    @media( max-width: 680px ){
        & {
            padding: 0 !important;
        }
    }
}
.esg .topico .qct-esg-list-item {
    @media( max-width: 680px ){
        & {
            gap: 8px;
        }
    }
}
.esg .topico figure {
    width: 64px;
}
.esg .topico figure img {
    width: 100% !important;
}

.qct-esg-temas .wp-block-column {
    @media( max-width: 780px ){
        & {
            padding: 0 24px !important;
        }
    }
}
.qct-esg-temas .wp-block-column .wp-block-separator {
    @media( max-width: 780px ){
        & {
            display: none;
        }
    }
}
.qct-esg-temas .wp-block-columns {
    @media( max-width: 780px ){
        & {
            background-color: var(--wp--preset--color--color-blue-quali);
            padding: 24px 0 !important;
        }
    }
}

@media (max-width: 1100px) {
    .esg .banner {
        flex-direction: column;
    }
    .esg .valores {
        flex-direction: column;
    }
    .esg .matriz {
        flex-direction: column;
        gap: 0;
    }
    .esg .matriz .is-layout-flow:last-child {
        flex-basis: auto !important;
    }
    .esg .estrategia {
        flex-direction: column-reverse;
        gap: 0;
    }
    .esg .estrategia .is-layout-flow:first-child {
        flex-basis: auto !important;
        height: 300px;
    }
    .esg .estrategia .is-layout-flow:first-child figure img {
        width: 100%;        
    }
    .esg .relatorio {
        flex-direction: column;
    }
}

@media (max-width: 890px) {
    .esg .timeline {
        flex-direction: column;
    }
}

@media (max-width: 780px) {
    .esg .topico figure {
        max-width: 64px;
    }
    .esg .topico .estrategia_esg {}
    .esg .topico .causas {}
    .esg .topico .pilares {}
}