@media only screen and (min-width: 1640px) {
   .composition__photo {
      width: 25%;
   }

   .composition__photo--p2 {
      left: 42%; 
   } 
}


@media only screen and (max-width: 1200px) {
   #entrepreneur,
   #champion,
   #thinker,
   #problem-solver {height: 40rem;}
   
   #entrepreneur img {width: 28rem;}

   .farmer-content p {margin-bottom: 3rem;}

   cite {text-align: center;}

   #disc-jockey {height: 52rem;}

   #photographer,
   #digital-marketer {height: 56rem;}

   #disc-jockey img {max-height: 32rem;}

   #photographer h2 {padding-left: 3rem;}

   #digital-marketer h2 {padding-bottom: 7rem;}
}

@media only screen and (max-width: 1023px) {
   .header__profile {font-size: 1.9rem;}

   .composition {margin-top: 3rem;}

   .composition__photo--p2 {top: 1rem;}

   .composition__photo--p3 {top: 7rem;}

   #human {height: 46rem;}

   #entrepreneur {height: 30rem;}

   #entrepreneur img {width: 20rem;}

   #disc-jockey {height: 45rem;}

   #disc-jockey img {max-height: 27rem;}

   #disc-jockey p {font-size: 4.5rem;}

   #photographer {height: 48rem;}

   #foodie p {margin-top: 6rem;}

   #digital-marketer {height: 48rem;}

   #digital-marketer i {margin-left: 5rem;}

   .social {padding: 8rem 0;}
}

@media only screen and (max-width: 767px) {
   .header__image {
      max-height: 20rem;
      padding: 1rem 0 0 1rem;
    }

   .header__content {
      padding: 0 1rem;
      margin-top: -1.75rem;
    }
     
   .header__content h1 {
      font-size: 2.2rem;
      font-weight: 600;
    }

   .header__profile {
      margin-top: -1.25rem;
      font-size: 1.55rem;
    }

   h2 { 
      padding: 0 0 1rem 1rem;
      font-size: 2rem;
      font-weight: 600;
    }

   #human,
   #coder,
   #entrepreneur,
   #farmer,
   #optimist,
   #champion,
   #disc-jockey,
   #thinker,
   #problem-solver,
   #foodie,
   #photographer h2,
   #leader,
   #digital-marketer {padding: 1rem;}

   #human {height: 48rem;}

   .statement,
   .portfolio-items li a:link,
   .portfolio-items li a:visited {font-size: 1.5rem;}

   .statement {padding: 0 1rem;}

   .composition__photo--p3 {top: 5rem;}

   #entrepreneur {height: 20rem;}

   #entrepreneur h2 {padding-bottom: 3rem;}
     
   #entrepreneur img {width: 15rem;}
     
   .farmer-content p {font-size: 1.7rem;}

   .farmer-content {font-size: 1.6rem;}
     
   #optimist,
   #champion {height: 40rem;}

   #disc-jockey {height: 28rem;}

   #disc-jockey img {max-height: 18rem;}

   #disc-jockey p {
      font-size: 2.5rem;
      margin-top: 5rem;
    }

   #thinker,
   #digital-marketer {height: 38rem;}

   #photographer {height: 30rem;}

   #digital-marketer i {margin-left: 3rem;}

   .social {padding: 6rem 0;}

   .btn:link,
   .btn:visited {font-size: 2.75rem;}

   .row [class^="col-"]:not(:last-child) {margin-right: 1rem;}

   .row .col-1-of-2 {width: calc((100% - 1rem) /2);}

   .row .col-1-of-3 {width: calc((100% - 2 * 1rem) /3);}

   .row .col-1-of-4 {width: calc((100% - 3 * 1rem) /4);}    
}

@media only screen and (max-width: 480px) {
   .row .col-1-of-2 {width: 100%;}
   
   #header {position: relative;}

   .header__image,
   .header__content {
      display: block;
      position: absolute;
    }

   .header__image {left: 20%;}

   .header__content {
      width: 100%;
      top: 25rem;
    }

   #human {height: 51rem;}

   #entrepreneur {height: 16rem;} 

   #entrepreneur img {width: 10rem;}

   .icon-big {font-size: 2.5rem;}

   #optimist,
   #champion {height: 44rem;}

   #disc-jockey {height: 42rem;}

   #disc-jockey img {
      max-height: 20.6rem;
      padding: 1rem;
    }

   #disc-jockey p {
      font-size: 3.5rem;
      margin-left: -1rem;
      margin-top: 1.5rem;
    }

   .btn:link,
   .btn:visited {font-size: 2rem;}

   #digital-marketer i {margin-left: 1.5rem;}
}