
.VPHome {
  --vp-home-hero-name-color: transparent;
  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, var(--vp-c-brand-1) 30%, var(--vp-c-brand-3));

  --vp-home-hero-image-background-image: linear-gradient(-100deg, hsla(211deg, 100%, 30%, 1), hsla(211deg, 100%, 50%, 1)) url(https://grainy-gradients.vercel.app/noise.svg);

  .main, .main .text {
    @media (min-width: 960px) {
      max-width: 700px!important;
    }
  }

  section {
    @apply grid grid-cols-1 lg:grid-cols-[35%_1fr] gap-x-12 mb-16 lg:mb-24 [h1+&]:mt-16 last:mb-0;
    ul {
      @apply list-none pl-0;
    }
    h2 {
      @apply -order-1 lg:order-none mb-8 mt-0 text-2xl border-t-0 pt-0;
      a { @apply hidden }
    }
    h3 {
      @apply mb-1 font-medium text-base mt-0;
      a { @apply hidden }
    }
    > p { @apply text-sm font-normal opacity-75 mt-0 mb-6 last-of-type:mb-0 }
    figure {
      @apply mb-8 lg:mb-4 mt-0 xl:-mr-[min(200px,calc((100vw-1280px)/2))] -order-1 lg:order-none lg:col-start-2 max-w-[600px] lg:max-w-none lg:row-start-1 lg:row-end-[span_32];
      p { @apply my-0 }
    }
    img {
      @apply border border-solid border-neutral-200 rounded-md ring-offset-0;
    }
  }

  .image-container {
    transform: none;

    &:hover {
      .image-bg {
        animation: bg-turn 5s infinite cubic-bezier(0.7, 0, 0.3, 1);
      }
      .image-src {
        animation: fg-turn 5s infinite cubic-bezier(0.7, 0, 0.3, 1);
      }
    }

    @media (min-width: 960px) {
      width: 260px;
      height: 260px;
    }
  }

  .image-bg {
    background: hsla(211deg, 100%, 40%, 1);
    transform: translate(-50%, -50%);
    overflow: hidden;
    width: 160px;
    height: 160px;
    /*animation: turn2 5s infinite cubic-bezier(0.7, 0, 0.3, 1);*/

    @media (min-width: 640px) {
      width: 260px;
      height: 260px;
    }

    &::before {
      content: '';
      position: absolute;
      inset: 0;
      mix-blend-mode: multiply;
      opacity: .75;
      filter: contrast(180%) brightness(1000%);
      background:
              radial-gradient(circle at 40% 60%, rgba(0, 0, 0, 0), #000),
                /*linear-gradient(220deg, #000 -30%, rgba(0,0,0,0) 130%),*/
              url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    }
  }

  .image-src {
    width: 120px;
    height: 120px;
    mix-blend-mode: color-dodge;
    opacity: .5;
    transform-origin: 50% 58%;
    transform: translate(-50%, -58%);

    @media (min-width: 640px) {
      width: 200px;
      height: 200px;
    }
  }
}

@keyframes bg-turn {
  0% {
    transform: translate(-50%, -50%);
  }
  30% {
    transform: translate(-50%, -50%) rotate(-720deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-720deg);
  }
}

@keyframes fg-turn {
  0% {
    transform: translate(-50%, -58%);
  }
  30% {
    transform: translate(-50%, -58%) rotate(720deg);
  }
  100% {
    transform: translate(-50%, -58%) rotate(720deg);
  }
}
