.hero-animation {
  padding-left: 0px;

  >div {
    position: relative;

    .shield {
      animation-duration: 1500ms;
      animation-fill-mode: forwards;
      animation-timing-function: ease-in-out;
    }

    .gradient {
      aspect-ratio: 1 / 1;
      width: 100%;
      border-radius: var(--border-radius);
      overflow: hidden;
    }

    .gradient:not(:first-child) {
      margin-top: -50%;
    }

    .shield:nth-child(1) {
      animation-name: anim1;
      background: conic-gradient(from 135deg at 50% 50%, transparent, var(--color-pastel-green-400));
      translate: -50%;
    }

    .shield:nth-child(2) {
      animation-name: anim2;
      background: conic-gradient(from -135deg at 50% 50%, transparent, var(--color-pastel-green-400));
      margin-top: 0px;
      position: absolute;
      top: 0px;
      translate: 20.5%;
    }

    .shield:nth-child(3) {
      animation-name: anim3;
      background: conic-gradient(from 180deg at 50% 50%, var(--color-pastel-green-400), transparent);
      translate: 20.5% 20.5%;

      &::after {
        animation-duration: 1500ms;
        animation-fill-mode: forwards;
        animation-name: anim4;
        background: conic-gradient(from -45deg at 50% 50%, transparent, var(--color-pastel-green-400));
        content: "";
        height: 100%;
        position: absolute;
        width: 100%;
      }
    }
  }
}

@keyframes anim2 {
  0% {
    opacity: 0;
    rotate: 180deg;
  }

  100% {
    opacity: 1;
    rotate: 45deg;
  }
}

@keyframes anim1 {
  0% {
    rotate: -90deg;
    opacity: 0;
  }

  100% {
    rotate: 45deg;
    opacity: 1;
  }
}

@keyframes anim3 {
  0% {
    opacity: 0;
    rotate: -90deg;
  }

  100% {
    opacity: 1;
    rotate: 45deg;
  }
}

@keyframes anim4 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (min-width: 0) {
  .hero-animation {
    opacity: 0.25;
    grid-row: 1 / 2;
    grid-column: 2 / span 2;
  }
}

@media (min-width: 40rem) {
  .hero-animation {
    grid-column: 5 / span 4;
  }
}

@media (min-width: 64rem) {
  .hero-animation {
    opacity: 1;
    top: -3rem;
    width: 17.5%;
    right: var(--container-padding);
    position: absolute;
    grid-column: 9 / span 3;
  }
}