:root {
  /* Prop Heights */
  --tree-height: 300px;
  --tree-bottom: 0;
  --tree-left: 20px;

  --pyramids1-height: 200px;
  --pyramids1-bottom: 0;
  --pyramids1-right: -10%;

  --band-height: 120px;
  --band-bottom: 0;
  --band-left: 45%;

  --sun-height: 125px;
  --sun-right: 4%;
}

@media (max-width: 600px) {
  :root {
    --tree-height: 160px;
    --tree-bottom: 0;
    --tree-left: 1%;

    --pyramids1-height: 150px;
    --pyramids1-bottom: 0;
    --pyramids1-right: -25%;

    --band-height: 80px;
    --band-bottom: 0;
    --band-left: 30%;

    --sun-height: 75px;
    --sun-bottom: 20%;
    --sun-right: 4%;
  }
}

.tree {
  position: absolute;
  height: var(--tree-height);
  bottom: var(--tree-bottom);
  left: var(--tree-left);
}

.pyramids1 {
  position: absolute;
  height: var(--pyramids1-height);
  bottom: var(--pyramids1-bottom);
  right: var(--pyramids1-right);
}

/* Band */
.band {
  height: var(--band-height);
}

.sun {
  height: var(--sun-height);
}

.sun-holder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.band-container {
  position: absolute;
  left: var(--band-left);
  display: grid;
  grid-template-columns: 5ch 5ch 5ch 20ch;
  justify-content: space-between;
  bottom: var(--band-bottom);
  height: var(--band-height);
  display: flex;
  justify-content: center;
}

.pyramid-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url('../../../assets/image/pyramid-horizon.png');
  background-repeat: repeat-x;
  background-position: bottom left;
  background-size: auto 100%;
  pointer-events: none;
}

@media (max-width: 600px) {
  .pyramid-horizon {
    height: 75px;
  }
}