/* -----Reset ------ */
   
   html {
       box-sizing: border-box;
       font-family: sans-serif;
       font-size: 16px;
       text-align: center;

   }

	*, *:before,
    *:after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
        font-size: 1rem;
    }

    /* --------------------------------------------- */
    .container-projects figcaption { font-size: 1rem; }
    h3 {
      margin-top: 1rem;
    }
  img {
      max-width: 100%;
      height: auto;
      box-shadow: 0 0 7px rgba(0, 0, 0, .6);
  }
  .header {
      padding: 1rem;
      background-color: #2c974b;
      color: #fff;
      margin-bottom: 2rem 0;
  }
  .header img {
    max-width: 85%;  
      
  }

  .container-projects {
      display: block;
      margin: auto;
      width: 100%;
      font-size: 0;
    }
   

  .container-projects figure { padding: 1rem;}
  .container-projects img {
       max-width: 75%;
       cursor: pointer;
    }

  .footer {
      padding: 2rem;
      background-color: #2c974b;
      color: #fff;
  }

  .footer p {
      padding-bottom: 1rem;
  }
  
  
  
  /*----------- breack point ------------------ */
  
  /* Small devices (landscape phones, 576px and up) */
  @media screen and (min-width: 576px) {
    /* .header { background-color: red; }  */
   
    .container-projects figure { 
        display: inline-block;
        width: 50%; 
        vertical-align: top;
      }        
  
}

/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  /* .header { background-color: green; } */
 
  .container-projects figure { width: 33.33%; }
  .header img { max-width: 75%;  }

  h3, h2 { font-size: 1.4rem;}
  .footer {
      display: flex;
      justify-content: space-around;
  }
  
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  /* .header { background-color: blue; }  */
  .header img {max-width: 60%;  }
  
  .container-projects figure { width: 25%;}
  .container-projects figcaption { font-size: 1.5rem; }
  
}

/* Extra large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  /* .header { background-color: cyan; } */
  .container-projects img {max-width: 60%; }

}