/* COMEÇE POR AQUI */

/*id das imagens sobre
    #formacao-icone
    #diversidade-icone
    #diversidade-foto
    #desenvolvimento-icone
    #desenvolvimento-foto
    #impacto-icone
*/

html {
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

h1 {
    color: var(--verde-marinho);
    font-weight: 900;
}

p {
    color: var(--branco);
    font-weight: 300;
}

.container-image {
    position: relative;
    display: flex;
}

#formacao, #diversidade, #desenvolvimento, #impacto {
    position: relative;
    display: grid;
    width: 100%;
    padding: 10%;
}

#formacao, #desenvolvimento {
    text-align: left;
}

#diversidade, #impacto {
    text-align: right;
}

img {
    width: 200px; /*Tamanho temporário. Apagar após definir o tamanho para desktop e mobile */
}

/* Celulares (para telas entre 360px e 576px) */
@media (min-width: 360px) and (max-width: 576px) {
    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1.2rem;
    }
    /*Seção FORMAÇÃO*/
    #formacao {
       grid-template-columns: auto 30%; /*Duas colunas: h1 e icone*/
       grid-template-rows: auto auto; /*Duas linhas: h1 e p*/
    }

    #formacao h1 {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 15px;
    }

    #formacao-icone {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    #formacao p {
        grid-row: 2;
        grid-column: 1 / -1; /*Ocupar coluna 1 e 2 da linha 2*/
    }

    /*Seção DIVERSIDADE*/
    #diversidade {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #diversidade h1 {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: 15px;
    }

     #diversidade p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da linha 2*/
        padding-bottom: 5px;
    }

    #diversidade .container-image {
        grid-row: 3;
        grid-column: 1;
        position: relative;
        justify-content: left;
        width: 70%;
        padding-bottom: 5%;
    }
 
     #diversidade-icone {
        width: 30%;
        position: absolute;
        top: 0;
        right: 0;
    }

     #diversidade-foto {
        width: 75%;
        position: relative;
        top: 10%;
    }
    
    /*Seção DESENVOLVIMENTO*/
    #desenvolvimento {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #desenvolvimento h1 {
        grid-row: 1;
        grid-column: 1;
    }

     #desenvolvimento p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da 
        linha 2*/
        padding-bottom: 5%;
    }

    #desenvolvimento .container-image {
        grid-row: 3;
        grid-column: 1;
        position: relative;
        justify-content: right;
        width: 100%;
    }
 
    #desenvolvimento-icone {
        width: 25%;
        position: absolute;
        right: 48%;
        bottom: 0;
    }

     #desenvolvimento-foto {
        width: 50%;
    }

    /*Seção IMPACTO*/
    #impacto {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #impacto h1 {
        grid-row: 1;
        grid-column: 1;
    }

     #impacto p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da linha 2*/
        justify-self: end;
        width: 85%;
    }
 
    #impacto-icone {
        grid-row: 3;
        grid-column: 1;
        width: 35%;
        position: relative;
        top: -20%;
        left: 0;
    }
}

/* DEPOIS AQUI */
/* Tablet (para telas entre 576px e 768px) */
@media (min-width: 576px) and (max-width: 767px) {
    h1 {
        font-size: 2rem;
    }

    p {
        font-size: 1.2rem;
    }
    /*Seção FORMAÇÃO*/
    #formacao {
       grid-template-columns: auto 30%; /*Duas colunas: h1 e icone*/
       grid-template-rows: auto auto; /*Duas linhas: h1 e p*/
    }

    #formacao h1 {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 15px;
    }

    #formacao-icone {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
    }

    #formacao p {
        grid-row: 2;
        grid-column: 1 / -1; /*Ocupar coluna 1 e 2 da linha 2*/
    }

    /*Seção DIVERSIDADE*/
    #diversidade {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #diversidade h1 {
        grid-row: 1;
        grid-column: 1;
        margin-bottom: 15px;
    }

     #diversidade p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da linha 2*/
        padding-bottom: 5px;
    }

    #diversidade .container-image {
        grid-row: 3;
        grid-column: 1;
        position: relative;
        justify-content: left;
        width: 70%;
        padding-bottom: 5%;
    }
 
     #diversidade-icone {
        width: 30%;
        position: absolute;
        top: 0;
        right: 0;
    }

     #diversidade-foto {
        width: 75%;
        position: relative;
        top: 10%;
    }
    
    /*Seção DESENVOLVIMENTO*/
    #desenvolvimento {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #desenvolvimento h1 {
        grid-row: 1;
        grid-column: 1;
    }

     #desenvolvimento p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da 
        linha 2*/
        padding-bottom: 5%;
    }

    #desenvolvimento .container-image {
        grid-row: 3;
        grid-column: 1;
        position: relative;
        justify-content: right;
        width: 100%;
    }
 
    #desenvolvimento-icone {
        width: 25%;
        position: absolute;
        right: 48%;
        bottom: 0;
    }

     #desenvolvimento-foto {
        width: 50%;
    }

    /*Seção IMPACTO*/
    #impacto {
        grid-template-columns: auto; /*1 coluna*/
        grid-template-rows: auto auto auto; /*3 linhas: h1 e p*/
    }
 
     #impacto h1 {
        grid-row: 1;
        grid-column: 1;
    }

     #impacto p {
        grid-row: 2;
        grid-column: 1; /*Ocupar coluna 1 e 2 da linha 2*/
        justify-self: end;
        width: 85%;
    }
 
    #impacto-icone {
        grid-row: 3;
        grid-column: 1;
        width: 35%;
        position: relative;
        top: -20%;
        left: 0;
    }
}

/* E POR ULTIMO AQUI */
/* Desktop (para telas a partir 768px) */
@media (min-width: 768px){
    h1 {
        font-size: 3.5rem;
    }

    p {
        font-size: 1.5rem;
    }

    /*Seção FORMAÇÃO*/
    #formacao {
        grid-template-columns: auto 40%; /*Duas colunas*/
        grid-template-rows: auto auto; /*Duas linhas*/
     }
 
     #formacao h1 {
         grid-column: 1;
         grid-row: 1;
         margin-bottom: 50px;
     }
 
     #formacao-icone {
        grid-row: 1 / -1;
        grid-column: 2;       
        width: 100%;
        max-width: 300px;
        position: relative;
        top: 50px;
     }
 
     #formacao p {
         grid-row: 2;
         grid-column: 1; /*Ocupar coluna 1 e 2 da linha 2*/
     }
 
     /*Seção DIVERSIDADE*/
     #diversidade {
         grid-template-columns: 45% auto; /*2 colunas*/
         grid-template-rows: auto auto; /*2 linhas*/
     }
  
      #diversidade h1 {
         grid-row: 1;
         grid-column: 2;
         margin-bottom: 50px;
     }
 
      #diversidade p {
         grid-row: 2;
         grid-column: 2;
     }
 
     #diversidade .container-image {
         grid-row: 1 / -1;
         grid-column: 1;
         position: relative;
     }
  
      #diversidade-icone {
         width: 30%;
         position: absolute;
         top: 0;
         right: 0;
     }
 
      #diversidade-foto {
         width: 100%;
         object-fit: contain;
         position: relative;
         align-self: baseline;
         top: 10%;
     }
     
     /*Seção DESENVOLVIMENTO*/
     #desenvolvimento {
         grid-template-columns: auto 45%; /*2 colunas*/
         grid-template-rows: auto auto; /*2 linhas*/
     }
  
      #desenvolvimento h1 {
         grid-row: 1;
         grid-column: 1;
     }
 
      #desenvolvimento p {
         grid-row: 2;
         grid-column: 1;
     }
 
     #desenvolvimento .container-image {
         grid-row: 1 / -1;
         grid-column: 2;
         position: relative;
     }
  
     #desenvolvimento-icone {
         width: 25%;
         position: absolute;
         right: 0%;
         bottom: 0;
     }
 
      #desenvolvimento-foto {
         width: 100%;
         object-fit: contain;
         align-self: end;
         position: relative;
         bottom: 10%;
     }
 
     /*Seção IMPACTO*/
     #impacto {
         grid-template-columns: 30% auto; /*2 colunas*/
         grid-template-rows: auto auto; /*2 linhas*/
     }
  
      #impacto h1 {
         grid-row: 1;
         grid-column: 2;
         padding: 50px;
     }
 
      #impacto p {
         grid-row: 2;
         grid-column: 2;
         justify-self: end;
         width: 85%;
     }
  
     #impacto-icone {
         grid-row: 1 / -1;
         grid-column: 1;
         width: 100%;
         position: relative;
         align-self: baseline;
         top: 10%;
     }
}