:root {
  
  --vp-home-hero-image-filter: blur(30px);

  --vp-c-indigo-1: #eb89b6;

  .image-container {
    transform: skew(-2deg, 2deg);
    animation: up-down-bg 0.15s ease-in;
    opacity: 0;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
    bottom: -5px;
  }
  
  .image-container img {
    border-radius: 5px;
    max-width: 550px !important;
    height: auto !important;
    opacity: 0;
    animation: up-down 0.5s ease;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
    bottom: -5px;
  }
}

@keyframes up-down-bg {
  0% {
    opacity: 0;
    bottom: -5px;
  }
  100% {
    opacity: 1;
    bottom: 0;
    --vp-home-hero-image-background-image: linear-gradient(
    -45deg,
    #75b0ff80 50%,
    #b289eb4f 50%
  );
  }
}

@keyframes up-down {
  0% {
    opacity: 0;
    bottom: -5px;
  }
  100% {
    opacity: 1;
    bottom: 0;
  }
}