@keyframes atmosphere {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

@keyframes group-atmosphere {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.msp-overview {
  &-header {
    height: 206px;
    background-size: 100% auto;
    background-repeat: no-repeat;

    .bg-large {
      left: 0;
      bottom: 0;
      animation-delay: 200ms;
    }

    .bg-middle {
      right: 265px;
      top: -50px;
      animation-delay: 400ms;
    }

    .bg-small {
      top: 146px;
      left: 47%;
      animation-delay: 600ms;
    }

    img {
      animation: atmosphere 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
  }

  .header-img-wrapper {
    height: 180px;
    width: 215px;

    img {
      animation-name: group-atmosphere;
    }

    .background-img {
      animation: unset;
    }

    .bottom-img {
      bottom: 67px;
      left: 58px;
    }

    .middle-img {
      left: 109px;
      bottom: 112px;
      animation-delay: 500ms;
    }

    .top-img {
      bottom: 144px;
      left: 74px;
      animation-delay: 250ms;
    }

    .decoration-img {
      &.left {
        bottom: 53px;
        left: 3px;
        animation-delay: 200ms;
      }

      &.top {
        left: 60px;
        bottom: 119px;
        animation-delay: 300ms;
      }

      &.right {
        right: 4px;
        bottom: 63px;
        animation-delay: 400ms;
      }
    }
  }

  .project-item {
    .desc {
      color: rgba($color-default, 0.6);
    }
  }
}
