.scene-12 {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .5s;
    pointer-events: none;
  }
  
  .scene12-content {
    position: absolute;
    inset: 6vh 6vw 6vh calc(6vw + 3.5rem);
    display: flex;
    flex-direction: column;
  }
  
  .scene12-photo-field {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(5, 7.25rem);
    grid-template-rows: repeat(2, 7.25rem);
    gap: 2rem 2.2rem;
    justify-content: center;
    align-content: center;
  }
  
  .scene12-item {
    position: relative;
    width: 7.25rem;
    aspect-ratio: 1;
    overflow: hidden;
    opacity: 0;
    transform: none;
    transition: opacity 1s ease;
  }
  
  .scene12-item.show {
    opacity: 1;
  }
  
  .scene12-item.dim {
    opacity: .3;
    transition: opacity 3s ease;
  }
  
  .scene12-item.selected {
    opacity: 1;
  }
  
  .scene12-item.fade-out {
    opacity: 0;
    transition: opacity 2.2s ease;
  }
  
  .scene12-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  
  .scene12-photo {
    object-fit: cover;
  }
  

  
  .scene12-title {
    width: 100%;
    margin-top: 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .scene-12 .small-text,
  .type-text-scene12 {
    position: relative;
    display: block;
    text-align: center;
    width: auto;
  }
  
  @media (max-width: 81.25rem) {
    .scene12-photo-field {
      grid-template-columns: repeat(5, 6rem);
      grid-template-rows: repeat(2, 6rem);
      gap: 1.5rem 1.7rem;
    }
  
    .scene12-item {
      width: 6rem;
    }
  }