.triump-gradient-card {
  width: var(--tgta-parent-width);
  min-height: var(--tgta-parent-min-height);
  padding: var(--tgta-parent-padding);
  border-radius: var(--tgta-parent-radius);
  background: var(--tgta-parent-background);
  text-align: var(--tgta-align);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  transform: scaleY(0.08);
  transform-origin: center center;
  opacity: 0;

  transition:
    transform 1.15s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.7s ease;
}

.triump-gradient-card.tgta-in-view {
  transform: scaleY(1);
  opacity: 1;
}

.triump-gradient-title {
  margin: 0;
  font-family: var(--tgta-font-family);
  font-size: var(--tgta-font-size);
  font-weight: var(--tgta-font-weight);
  line-height: var(--tgta-line-height);
  letter-spacing: var(--tgta-letter-spacing);
  text-transform: var(--tgta-text-transform);
}

.triump-gradient-text {
  display: inline-block;
  color: var(--tgta-base-color);
  background: linear-gradient(
    var(--tgta-gradient-direction),
    var(--tgta-base-color) 0%,
    var(--tgta-base-color) 30%,
    var(--tgta-gradient-color) 50%,
    var(--tgta-base-color) 70%,
    var(--tgta-base-color) 100%
  );
  background-size: 220% auto;
  background-position: -100% center;

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.triump-gradient-card.tgta-in-view .triump-gradient-text {
  animation-name: tgta-gradient-sweep;
  animation-duration: var(--tgta-duration);
  animation-delay: var(--tgta-delay);
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-fill-mode: both;
  animation-iteration-count: var(--tgta-iteration, infinite);
}

@keyframes tgta-gradient-sweep {
  0% {
    background-position: -100% center;
  }
  100% {
    background-position: 100% center;
  }
}

@media (max-width: 767px) {
  .triump-gradient-card {
    padding: 52px 22px;
    border-radius: 24px;
    min-height: 280px;
  }
}