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

    .segmentos .container {
        grid-template-rows: auto;
        row-gap: var(--spacing-32);
    } 

        .segmentos .titulo-texto, .segmentos .img-container, .segmentos .cultura, .segmentos .cultura, .segmentos .criacoes-funcionais, .segmentos .tecnologia, .segmentos .midia, .segmentos .gastronomia, .segmentos .linha-cinza-segmentos-1, .segmentos .linha-cinza-segmentos-2, .segmentos .linha-cinza-segmentos-3, .segmentos .linha-cinza-segmentos-4 {
            grid-column: 1/13;
        }

        .segmentos .titulo-texto {
            gap: 1rem;
            grid-row: 2/3;
        }

        .segmentos .img-container {
            grid-row: 1/2;
            height: 213px;
        }

        .segmentos .grupo-segmento {
            flex-direction: row;
            justify-content: space-between;
            height: 78px;
        }

            .segmentos .grupo-segmento .icone-h2 {
                display: column;
                gap: var(--spacing-10);
            }

            .segmentos .cultura {
                grid-row: 3/4;
            }

            .segmentos .linha-cinza-segmentos-1 {
                grid-row: 4/5;
            }

            .segmentos .criacoes-funcionais {
                grid-row: 5/6;
            }

            .segmentos .linha-cinza-segmentos-2 {
                grid-row: 6/7;
            }

            .segmentos .tecnologia {
                grid-row: 7/8;
            }

            .segmentos .linha-cinza-segmentos-3 {
                grid-row: 8/9;
            }

            .segmentos .midia {
                grid-row: 9/10;
            }

            .segmentos .linha-cinza-segmentos-4 {
                grid-row: 10/11;
            }

            .segmentos .gastronomia {
                grid-row: 11/12;
            }
}

/* tablet */ 

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

    .segmentos .container {
        grid-template-columns: repeat(6, auto);
        grid-template-rows: repeat(5, auto);
        row-gap: var(--spacing-32);
    }

        .segmentos .img-container {
            height: 256px;
            grid-column: 1/7;
            grid-row: 1/2;
        }

        .segmentos .titulo-texto {
            text-align: center;
            gap: var(--spacing-14);
            grid-column: 2/6;
            grid-row: 2/3;
        }

        .segmentos .cultura {
            grid-column: 1/4;
            grid-row: 3/4;
        }

        .segmentos .criacoes-funcionais {
            grid-column: 4/7;
            grid-row: 3/4;
        }

        .segmentos .tecnologia {
            grid-column: 1/4;
            grid-row: 4/5;
        }

        .segmentos .midia {
            grid-column: 4/7;
            grid-row: 4/5;
        }

        .segmentos .gastronomia {
            grid-column: 1/4;
            grid-row: 5/6;
        }

}