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

    :root {

        --base-grid-spacing: 1rem;
    }


    .container {
        width: var(--mobile-content-container-width);
    }

/* margens */

    .section-margin-top {
        margin-top: var(--section-margin-top-bottom-mobile);
    }

    .section-margin-bottom {
        margin-bottom: var(--section-margin-top-bottom-mobile);
    }

/* gap container */

    .eixos .container, .institucional-1 .container, .institucional-2 .texto-container, .institucional-galeria .container, .colaboradores .container, .calendario-eventos .container, .apresentacao .container, .dados-economia-criativa .container, .projetos-em-execucao .container {
        gap: var(--spacing-32);
    }

/* headers */

    .eixos h1, .colaboradores h1, .calendario-eventos h1, .newsletter h1 {
        width: var(--mobile-content-container-width);
    }

/* fontes */

    h1 {
        font-size: 1.5rem; /*24px*/
        line-height: 1.8rem; /*28.8px*/
    }

    h2 {
        font-size: 1.25rem; /*20px*/
    }

    h3 {
        font-size: 1.125rem; /*18px*/
        line-height: 1.35rem; /*21.6px*/
    }

    p {
        font-size: 1rem; /*16px*/
    }

    .p-small {
        font-size: 0.875rem; /*14px*/
    }

/* botão */

    .botao-branco, .botao-azul {
        width: 212px;
        height: 50px;
        font-size: 0.875rem;
    }

/* display */

    .mobile-hidden {
        display: none !important;
    }

    .desktop-hidden {
        display: flex !important;
    }

/* seção apresentação - economia criativa e eixos */ 

    .apresentacao .container h3 {
        line-height: 1.75rem;
    }

}

/* tablet */ 

@media only screen and (min-width: 670px) and (max-width: 999px) { 

    .container {
        width: var(--tablet-content-container-width);
    }

/* margens */

    .section-margin-top {
        margin-top: var(--section-margin-top-bottom-tablet);
    }

    .section-margin-bottom {
        margin-bottom: var(--section-margin-top-bottom-tablet)
    }

/* fontes */

    h1 {
        font-size: 1.5rem; /*24px*/
        line-height: 1.71875rem; /*27.5px*/
    }

    h2 {
        font-size: 1.25rem; /*20px*/
        line-height: 1.5rem; /*24px*/
    }

    h3 {
        font-size: 1rem;
        line-height: 1.35rem;
    }

    p {
        font-size: 1rem; /*16px*/
        line-height: 1.3125rem; /*21px*/
    }

    .p-small {
        font-size: 0.875rem; /*14px*/
    }

/* botão */

    .botao-branco, .botao-azul {
        width: 212px;
        height: 50px;
        font-size: 0.875rem;
    }

/* display */

    .tablet-hidden {
        display: none !important;
    }

    .tablet-visible {
        display: flex !important;
    }

}

@media only screen and (min-width: 1000px) and (max-width: 1269px) {



}