:root {
    --card-gap-actions: 16px;
  }
  .card-main-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--card-gap-actions);
    opacity: 0;
    transform: translateY(1rem);
    transition:
      opacity 0.3s,
      transform 0.3s;
    pointer-events: auto;
    height: 16px;
  }
  .card-main-actions.show {
    opacity: 1;
    transform: translateY(calc(var(--card-gap-actions) * -1));
    height: auto;
  }
  .card-main-info {
    transition: transform 0.3s;
    transform: translateY(calc(var(--card-gap-actions) * 2));
  }
  .card-main-info.raised {
    transform: translateY(0);
  }@keyframes astroFadeInOut {
	from {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}

@keyframes astroFadeIn {
	from {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroFadeOut {
	from {
		opacity: 1;
		mix-blend-mode: plus-lighter;
	}
	to {
		opacity: 0;
		mix-blend-mode: plus-lighter;
	}
}

@keyframes astroSlideFromRight {
	from {
		transform: translateX(100%);
	}
}

@keyframes astroSlideFromLeft {
	from {
		transform: translateX(-100%);
	}
}

@keyframes astroSlideToRight {
	to {
		transform: translateX(100%);
	}
}

@keyframes astroSlideToLeft {
	to {
		transform: translateX(-100%);
	}
}

@media (prefers-reduced-motion) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) {
		animation: none !important;
	}

	[data-astro-transition-scope] {
		animation: none !important;
	}
}