#garden-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#garden-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background: url('https://cdn.imgchest.com/files/ad1e444e31ee.png') center/cover no-repeat;
  z-index: 0;
}

#grid {
  position: absolute;
  top: 47%;
  left: 50%;
  width: 108%;
  height: 108%;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 2%;
  transform: translate(-50%, -50%) scale(0.5) perspective(1000px) rotateX(15deg);
  transform-origin: center center;
  pointer-events: auto;
  z-index: 1;
}

.cell {
  position: relative;
}

.pot-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotateX(-15deg) scale(2);
  transform-origin: bottom center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pot {
  width: 80%;
  height: auto;
}

.plant {
  width: 75%;
  height: auto;
  margin-bottom: 5%;
}