@import "https://unpkg.com/open-props/easings.min.css";

@layer demo.view-transition {
  ::view-transition-group(*) {
    animation-duration: .5s;
    animation-timing-function: var(--ease-5);
  }
}

.hub > .gallery-item {
  @media (prefers-reduced-motion: no-preference) {
    &:nth-child(1) {
      view-transition-name: gallery-item-1;
    }
    &:nth-child(2) {
      view-transition-name: gallery-item-2;
    }
    &:nth-child(3) {
      view-transition-name: gallery-item-3;
    }
    &:nth-child(4) {
      view-transition-name: gallery-item-4;
    }
    &:nth-child(5) {
      view-transition-name: gallery-item-5;
    }
    &:nth-child(6) {
      view-transition-name: gallery-item-6;
    }
    &:nth-child(7) {
      view-transition-name: gallery-item-7;
    }
  }
}

@layer demo.layout {
  .hub {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(5, 15vw);
    grid-template-rows: repeat(3, 15vw);
    
    &.portrait {
      grid-template-columns: repeat(3, 20vw);
      grid-template-rows: repeat(5, 20vw);
    }
    
    /* selected promotion */
    > .gallery-item:has(:checked) {
      grid-column: 1 / 4;
      grid-row: 1 / 4;
    }
    
    /* pile the label, input and image */
    > .gallery-item {
      display: grid;
      
      > * {
        grid-area: 1/1;
      }
      
      > label {
        opacity: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      
      > input {
        border-radius: 0;
        outline-offset: 5px;
        outline-color: deeppink;
        outline-color: color(display-p3 1 0 1);
      } 
    }
  }
}

@layer demo.support {
  .box-sizing {
    box-sizing: border-box;
    margin: 0;
  }

  .full-height {
    block-size: 100%;
  }

  .color-scheme {
    color-scheme: dark light;
  }

  .centered-grid {
    display: grid;
    place-content: center;
  }

  .no-border {
    border: none;
    padding: 0;
    margin: 0;
  }

  .max-inline-size {
    max-inline-size: 100%;
  }

  .no-view-transition {
    view-transition-name: none;
  }
}