<div class="wrapper">
  <div class="sky">
    <i class="fas fa-cloud cloud1"></i>
    <i class="fas fa-cloud cloud2"></i>
    <i class="fas fa-cloud cloud3"></i>
    <i class="fas fa-helicopter"></i>
    <i class="fab fa-mailchimp"></i>
    <i class="fas fa-slash"></i>
    <img class="carrot" src="https://image.flaticon.com/icons/svg/1159/1159004.svg">
  </div>
  <div class="center">
    <i class="fas fa-tree tree1"></i>
    <i class="fas fa-tree tree2"></i>
    <i class="fas fa-tree tree3"></i>
    <i class="fas fa-home"></i>
    <i class="fas fa-crow"></i>
    <i class="fas fa-circle"></i>
    <i class="fab fa-dev"></i>
    <i class="fas fa-hat-wizard"></i>
    <i class="fas fa-female"></i>
    <i class="fas fa-dog"></i>
    <i class="fas fa-horse"></i>
    <i class="fas fa-horse horse2"></i>
    <i class="fas fa-warehouse"></i>
    <i class="fas fa-tractor"></i>
  </div>
  <div class="ground">
    <div class="water">
      <i class="fas fa-cat"></i>
      <i class="fas fa-fish"></i>
      <i class="fas fa-fish fish2"></i>
      <div class="credit">Carrot icon made by <a href="http://www.freepik.com" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0"
          target="_blank">CC 3.0 BY</a></div>
    </div>
  </div>
</div>

.wrapper {
  position: relative;
  color: #fff;
  display: grid;
  grid-template-areas:
    "a a a a"
    "a a a a"
    "b b b b"
    "b b b b";
  grid-auto-rows: 25vh;
}

.sky {
  position: relative;
  grid-area: a;
  display: grid;
  background-color: #54a8c3;
}

.center {
  position: relative;
  grid-area: b;
  display: grid;
  background-color: #0b4b10;
}

.ground {
  position: relative;
  grid-area: b;
  display: grid;
  background-color: #0b4b10;
}

.water {
  grid-area: b;
  display: grid;
  border-top-left-radius: 2vh;
  background-color: #0003f24d;
  width: 535px;
  justify-self: end;
  height: 12vh;
  align-self: end;
}

.carrot {
  max-width: 10vh;
  align-self: center;
  justify-self: center;
  transform: rotate(20deg);
  margin-top: 4vh;
  margin-left: 60vh;
}

.svg-inline--fa {
  position: absolute;
}

.fa-tree {
  z-index: 2;
  color: green;
  font-size: 30vh;
  align-self: end;
  margin-left: 15vh;
  margin-bottom: 38vh;
  justify-self: start;
}

.tree1 {
  color: #275d27;
}

.tree2 {
  color: #418341;
  margin-left: 5vh;
  margin-bottom: 30vh;
}

.tree3 {
  display: none;
  color: #418341;
  margin-left: 35vh;
  margin-bottom: 33vh;
}

@media only screen and (min-width: 700px) {
  .tree3 {
    display: block;
  }
}

.fa-home {
  z-index: 1;
  color: #000;
  font-size: 30vh;
  align-self: end;
  margin-right: 15vh;
  margin-bottom: 43vh;
  justify-self: center;
}

.fa-cloud {
  color: #fff;
  font-size: 10vh;
  align-self: end;
  margin-left: 70vh;
  margin-bottom: 30vh;
  justify-self: start;
}

.cloud2 {
  margin-left: 30vh;
  margin-bottom: 20vh;
}

.cloud3 {
  justify-self: end;
  margin-right: 15vh;
  margin-bottom: 25vh;
}

.fa-helicopter {
  color: #000;
  font-size: 10vh;
  align-self: end;
  margin-left: 70vh;
  margin-bottom: 30vh;
  justify-self: center;
  transform: rotate(20deg);
}

.fa-mailchimp {
  color: #fff;
  font-size: 3vh;
  align-self: end;
  margin-left: 70vh;
  margin-bottom: 33.5vh;
  justify-self: center;
  transform: rotate(30deg);
}

.fa-slash {
  color: #000;
  font-size: 5vh;
  align-self: end;
  margin-left: 63vh;
  margin-bottom: 25vh;
  justify-self: center;
  transform: rotate(80deg);
}

.fa-circle {
  z-index: 2;
  color: #54a8c3;
  font-size: 3vh;
  align-self: end;
  margin-bottom: 58vh;
  margin-right: 15vh;
  justify-self: center;
}

.fa-crow {
  color: #323232;
  font-size: 3vh;
  align-self: end;
  margin-bottom: 71vh;
  margin-right: -2vh;
  justify-self: center;
}

.fa-dev {
  color: #fff;
  font-size: 3vh;
  align-self: end;
  margin-bottom: 50vh;
  margin-right: 29vh;
  justify-self: center;
}

.fa-horse {
  color: #3e1a1a;
  font-size: 10vh;
  align-self: end;
  margin-left: 25vh;
  margin-bottom: 42vh;
  justify-self: center;
  z-index: 1;
}

.fa-female {
  z-index: 2;
  color: #111;
  font-size: 11vh;
  align-self: end;
  margin-left: 2vh;
  margin-bottom: 32vh;
  justify-self: center;
}

.fa-hat-wizard {
  color: #340041;
  align-self: end;
  justify-self: center;
  z-index: 3;
  margin-bottom: 42.4vh;
  font-size: 4vh;
  margin-left: 3vh;
  transform: rotate(10deg);
}

.fa-dog {
  z-index: 2;
  color: #8a8a8a;
  font-size: 6vh;
  align-self: end;
  margin-left: -7vh;
  margin-bottom: 30vh;
  justify-self: center;
}

.horse2 {
  z-index: 1;
  color: #261010;
  margin-left: 39vh;
  margin-bottom: 37vh;
  transform: scaleX(-1);
}

.fa-warehouse {
  color: #000c;
  font-size: 20vh;
  align-self: end;
  justify-self: end;
  margin-right: 30vh;
  margin-bottom: 50vh;
}

.fa-tractor {
  z-index: 1;
  color: #290400;
  font-size: 15vh;
  align-self: end;
  justify-self: end;
  margin-right: 11vh;
  margin-bottom: 39vh;
  transform: scaleX(-1);
}

.fa-cat {
  color: #000;
  font-size: 5vh;
  align-self: end;
  justify-self: end;
  margin-right: 58vh;
  margin-bottom: 13vh;
}

.fa-fish {
  color: #ffffff80;
  font-size: 3vh;
  align-self: end;
  justify-self: end;
  margin-right: 25vh;
  margin-bottom: 5vh;
  transform: scaleX(-1);
}

.fish2 {
  margin-right: 53vh;
  margin-bottom: 7vh;
  transform: scaleX(1);
}

.credit {
  padding: 1vh;
  align-self: end;
  justify-self: end;
}

.credit,
.credit a {
  color: #717171;
}