@keyframes kella-about-slideUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes kella-about-fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    visibility: hidden;
  }
}

.kella-about .about-banner__image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.kella-about .about-banner__flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  background-color: #0d0d0d;
  animation: kella-about-fadeOut 0.7s ease-in-out 0.1s forwards;
}

.kella-about .about-banner__title {
  z-index: 1;
  animation: kella-about-slideUp 1.1s ease-in-out forwards;
}

.kella-about .about-information .info-counter {
  background: linear-gradient(94.61deg, #ffde7d 0%, #e2a420 25%, #d69300 50%, #e2a320 75%, #ffdf7d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (min-width: 1024px) {
  .kella-about .about-information .info-counter {
    background: linear-gradient(to bottom right, #ffd58a, #b48935);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.kella-about .marquee-container {
  overflow: hidden;
  cursor: grab;
}

.kella-about .marquee-container:active {
  cursor: grabbing;
}

.kella-about .marquee-track {
  will-change: transform;
}

.kella-about .about-archivement img {
  -webkit-user-drag: none;
  user-select: none;
}