:root {
  --tree_displace_start: 7vh;
  --tree_displace_end: 10vh;
}

#tree {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(3vw, 30px);
  align-items: center;
}

#tree img:nth-child(odd) {
  animation: slide-from-left 1s ease-out;
}

#tree img:nth-child(even) {
  animation: slide-from-right 1s ease-out;
  translate: 0% var(--tree_displace_end);
}


@keyframes slide-from-left {
  0% {
    translate: -300%;
  }

  100% {
    translate: 0%;
  }
}



@keyframes slide-from-right {
  0% {
    translate: 300% var(--tree_displace_start);
  }

  100% {
    translate: 0% var(--tree_displace_end);
  }
}


#tree .pic {
  padding: 0.3vw;
  background: linear-gradient(45deg, white, #dfe9ed);
  box-shadow: 1px 1px 5px #11111188;
  border: 1px solid #c4c4c4;
  border-radius: 2px;
  height: auto;
  object-fit: contain;
}

@media screen and (max-width: 720px) {
  #tree {
    grid-template-columns: 1fr;
  }

  :root {
    --tree_displace_start: 0;
    --tree_displace_end: 0;
  }

}

.tree1 {
  rotate: 2deg;
}

.tree2 {
  rotate: -1deg;
}

.tree3 {
  rotate: -2.5deg;
}

.tree4 {
  rotate: 1.2deg;
}

.tree5 {
  rotate: 2.1deg;
}

.tree7 {
  rotate: 1deg;
}