#home-stack-container {
  overflow: hidden;
  margin: -128px calc((-100vw + var(--width)) / 2) -128px -128px;
  padding: 128px calc((100vw - var(--width)) / 2) 128px 128px;
}

#home-stack-container > .iso-stack {
  overflow: visible;
  transform: translate(120px, 0);
}

.iso-stack > div {
  position: relative;
  width: 360px;
  height: 640px;
  margin-top: 300px;
  margin-bottom: -200px;
  transform: rotate(-30deg) skew(25deg) scale(.8);

  @media (min-width: 992px) {
    margin-top: 128px;
  }
}

.iso-stack picture {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: 0.3s var(--ease);
}

.iso-stack img {
  width: 100%;
  box-shadow: -1px 2px 50px rgba(59, 64, 69, 0.5);
}

/* @for $i from 1 through 4 — expanded loop */
.iso-stack picture:nth-child(1) {
  transform: translate(0px, 0px);
}

@keyframes home-stack-up-1 {
  0% {
    opacity: 0;
    transform: translate(0px, 0px);
  }
  40% {
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    transform: translate(0px, 0px);
  }
}

#home-stack-container picture:nth-child(1) {
  animation: 1s var(--ease) 0s 1 home-stack-up-1;

  &:hover {
    transform: translate(-40px, -40px);
  }
}

.iso-stack picture:nth-child(2) {
  transform: translate(120px, -120px);
}

@keyframes home-stack-up-2 {
  0% {
    opacity: 0;
    transform: translate(360px, -360px);
  }
  50% {
    opacity: 0;
  }
  70% {
    opacity: 1;
  }
  100% {
    transform: translate(120px, -120px);
  }
}

#home-stack-container picture:nth-child(2) {
  animation: 1s var(--ease) 0s 1 home-stack-up-2;

  &:hover {
    transform: translate(80px, -160px);
  }
}

.iso-stack picture:nth-child(3) {
  transform: translate(240px, -240px);
}

@keyframes home-stack-up-3 {
  0% {
    opacity: 0;
    transform: translate(720px, -720px);
  }
  60% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translate(240px, -240px);
  }
}

#home-stack-container picture:nth-child(3) {
  animation: 1s var(--ease) 0s 1 home-stack-up-3;

  &:hover {
    transform: translate(200px, -280px);
  }
}

.iso-stack picture:nth-child(4) {
  transform: translate(360px, -360px);
}

@keyframes home-stack-up-4 {
  0% {
    opacity: 0;
    transform: translate(1080px, -1080px);
  }
  70% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translate(360px, -360px);
  }
}

#home-stack-container picture:nth-child(4) {
  animation: 1s var(--ease) 0s 1 home-stack-up-4;

  &:hover {
    transform: translate(320px, -400px);
  }
}

.iso-stack picture::before {
  /* Position */
  display: block;
  position: absolute;
  top: 0;
  left: -220px;
  width: 180px;

  /* Text */
  content: attr(data-caption);
  text-align: right;
  line-height: 1.4;

  /* Block */
  border-top: 0.5px solid color-mix(in srgb, white 8%, #77D075);
  padding: 8px 32px 8px 8px;
  margin-top: 55.5px;

  /* Highlight */
  z-index: -1;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(20px);

  /* Animation */
  opacity: 0;
}

#home-stack-container > .iso-stack img {
  border-radius: 11px;
}

#home-stack-container > .iso-stack picture::before {
  background: rgba(52, 68, 76, 0.35);
  border-radius: 0 0 0 11px;
}

.iso-stack picture:hover::before {
  opacity: 1;
  animation: 0.6s var(--ease) 0s 1 stack-caption-show;
}

@keyframes stack-caption-show {
  0%, 50% {
    opacity: 0;
    transform: translate(220px, 0);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

/* Normal Stack */
.image-info-container, .sticky-image-info-container {
  > * {
    margin: 0 auto;
    position: relative;

    @media (min-width: 768px) {
      display: flex;
      align-items: flex-start;
      margin: 32px 0 0;

      /* @for $i from 1 through 5 — expanded */
      &:nth-child(1) {
        margin-left: 0px;
      }
      &:nth-child(2) {
        margin-left: 80px;
      }
      &:nth-child(3) {
        margin-left: 160px;
      }
      &:nth-child(4) {
        margin-left: 240px;
      }
      &:nth-child(5) {
        margin-left: 320px;
      }
    }
  }

  figure {
    @media (min-width: 768px) {
      display: flex;
      align-items: flex-start;
    }

    > :first-child {
      flex-basis: 320px;
    }

    > picture {
      display: block;
      text-align: center;

      > img {
        width: 100%;
        margin: 0 auto;
        max-width: 320px;
        box-shadow: var(--shadow);
        box-sizing: border-box;

        @media (min-width: 768px) {
          border-radius: 10px;
        }
      }
    }

    > .flex-image img {
      max-width: min(480px, 100%);
    }
  }

  figcaption {
    flex-basis: 480px;
    margin-top: 16px;

    .main.home & {
      border-left: none;
    }

    @media (min-width: 768px) {
      margin: 0 24px 0 32px;
      padding: 0;

      .apps & {
        margin: 32px;
      }
    }
  }
}

.sticky-image-info-container {
  @media (min-width: 768px) {
    > * {
      position: -webkit-sticky;
      position: sticky;
      top: 0;

      /* @for $i from 1 through 5 — expanded */
      &:nth-child(1) {
        top: 32px;
        padding-bottom: 672px;
      }
      &:nth-child(2) {
        top: 192px;
        margin-top: -608px;
        padding-bottom: 512px;
      }
      &:nth-child(3) {
        top: 352px;
        margin-top: -448px;
        padding-bottom: 352px;
      }
      &:nth-child(4) {
        top: 512px;
        margin-top: -288px;
        padding-bottom: 192px;
      }
      &:nth-child(5) {
        top: 672px;
        margin-top: -128px;
        padding-bottom: 32px;
      }
    }
  }

  figcaption {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 10%);
    padding: 16px 32px 16px 32px;
    margin-top: -8px;

    @media (min-width: 768px) {
      position: unset;
      padding: 0 32px;
      background: none;
      margin: 0;
    }
  }
}