.life {
  width: 100%;
  height: fit-content;
  padding: 2rem 0;

  .box {
    width: 100%;
    height: 100%;

    h2 {
      text-align: center;
      padding: 3rem 0;
    }

    .showcase {
      width: 100%;
      padding: 1rem 0 0 0;
      position: relative;
      height: 300vh; /* enough scroll space */

      .card {
        position: sticky;
        padding: 0.5rem;
        top: 20px; /* stick near top */
        width: 100%;
        height: 280px;
        margin: 0 auto;
        /* border-radius: 12px; */
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        font-weight: bold;
        color: var(--d);
        transition: transform 0.3s ease;
        display: flex;
        flex-direction: column;
        gap: 10px;

        p { 
          text-align: center;
        }

        .subtext {
          font-weight: 500;
          font-size: 1rem;
        }
      }

      /* Different colors */
      .card:nth-child(1) {
        background: var(--p);
        z-index: 1;
      }
      .card:nth-child(2) {
        background: var(--b);
        color: var(--d);
        z-index: 2;
      }
      .card:nth-child(3) {
        background: var(--y);
        color: var(--d);
        z-index: 3;
      }
      .card:nth-child(4) {
        background: var(--p);
        z-index: 4;
      }
      .card:nth-child(5) {
        background: var(--b);
        color: var(--d);
        z-index: 5;
      }

      /* Key: shift earlier cards down so they're visible */
      .card:nth-child(1) {
        transform: translateY(0px);
      }
      .card:nth-child(2) {
        transform: translateY(40px);
      }
      .card:nth-child(3) {
        transform: translateY(80px);
      }
      .card:nth-child(4) {
        transform: translateY(120px);
      }
      .card:nth-child(5) {
        transform: translateY(160px);
      }
    }

    .showcase-pc {
      display: none;
    }
  }
}