body {
  padding-bottom: 2em;
}

@media (max-width: 450px) {

  .terminal-timeline::before {
    left: 15px;
  }

  .terminal-timeline .terminal-card::before {
    left: 7px;
  }

  .terminal-timeline {
    padding-left: 32px;
  }
}


.grid-container {
  width: 100%;
  position: relative;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
}

.grid-container:after {
  -webkit-mask-image: -webkit-gradient(linear, left 90%, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  mask-image: gradient(linear, left 90%, left top, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
  transform: perspective(200px) rotateX(40deg) scale(2, 1) translateZ(0);
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 1px;
  -webkit-background-clip: content-box;
  -webkit-backface-visibility: hidden;
  outline: 1px solid transparent;
  transform-origin: bottom center;
  will-change: transform;
}

.grid-container:after {
  opacity: 0.3;
  pointer-events: none;
  background-position: center bottom;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, #d783ee 2px, transparent 2px),
    linear-gradient(to bottom, #80119e 1px, transparent 2px)
}