.animation-section {
  height: 600vh
}

.animation-container {
  height: 100vh;
  position: sticky;
  top: 0;
  width: 100vw
}

.object-descriptions {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%
}

.object-descriptions .object-description {
  left: 17.5%;
  max-width: 400px;
  min-width: 250px;
  opacity: 0;
  position: fixed;
  top: 45%;
  transform: translateY(2rem);
  transition: opacity .4s ease-in-out, transform .4s ease-in-out;
  user-select: none;
  width: 25%
}

@media (max-width: 768px) {
  .object-descriptions .object-description {
    left: 15%;
    top: 35%
  }
}

.object-descriptions .object-description#main-description, .object-descriptions .object-description#takeaction-description {
  position: relative;
  top: auto
}

.object-descriptions .object-description.description-element-show {
  opacity: 1;
  transform: translateY(0);
  user-select: text
}

.object-description {
  display: flex;
  flex-direction: column;
  gap: 1rem
}

/*# sourceMappingURL=index.css.map */