.scene-9 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s;
  }
  
  .scene9-content {
    position: absolute;
    inset: 10vh 10vw 6vh 8vw;
    display: flex;
    flex-direction: column;
  }
  
  .scene9-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    opacity: 1;
    transition: opacity .45s ease;
    row-gap: 1rem;

  }
  
  .scene9-row {
    display: grid;
    grid-template-columns: 6.5625rem minmax(0, 1fr);
    column-gap: 3rem;
    align-items: center;

  }
  
  .scene9-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .scene9-svg {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
    display: block;
  }
  
  .scene9-date {
    margin-top: .625rem;
    font-family: var(--mono);
    font-size: 0.8rem;
    letter-spacing: .1em;
    color: #FFC107;
    text-align: center;
    white-space: nowrap;
  }
  
  .scene9-right {
    min-width: 0;
  }
  
  .scene9-paths {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap:.625rem 0;
    overflow: visible;
  }
  
  .scene9-segment {
    display: block;
    height: .1375rem;
    background: #ECDAB4;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 1.8s cubic-bezier(.22, .61, .36, 1);
}
  
  .scene9-segment + .scene9-segment {
    margin-left: .625rem;
  }
  
  .scene9-row.show .scene9-segment {
    transform: scaleX(1);
  }
  
  .scene9-dots {
    margin-top: .625rem;

    display: flex;
    flex-wrap: wrap;
    gap: .5rem;

    align-items: center;
}

.scene9-dot {
    width: .25rem;
    height: .25rem;

    border-radius: 50%;

    background: #FFC107;

    flex-shrink: 0;
}
  
  .scene9-title {
    width: 100%;
    margin-top: 2.4rem;
    display: flex;
    justify-content: center;
  }
  
  .scene-9 .small-text,
  .type-text-scene9 {
    position: relative;
    display: block;
    width: auto;
    text-align: center;
  }
  
  .scene9-list.fade {
    opacity: 0;
  }
  
  @media (max-width: 81.25rem) {
    .scene9-content {
      inset: 5vh 5vw 6vh 5vw;
    }
  
    .scene9-row {
      grid-template-columns: 5.5rem minmax(0, 1fr);
      column-gap: 2rem;
    }
  
    .scene9-svg {
      width: 3.75rem;
      height: 3.75rem;
    }
  
    .scene9-date,
    .scene9-dots {
      font-size: .74rem;
    }
  }
/* Date remains centred beneath each kolam thumbnail. */
.scene9-left {
  text-align: center;
}

.scene9-date {
  width: 100%;
  text-align: center;
}