@layer base, demo;

@layer demo {

  /* demo code goes here */
  .corners{
		--border-size: 5px;
		--border-color: #fff;
		/* default gid columns - note, to animatbale we need to defined them individually */
    --grid-cols: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr ;
    
    display: grid;
    grid-template-columns: var(--grid-cols);
    width:min(100%,100%);
    margin-inline: auto;
    aspect-ratio: 2/1;
    transition: grid 300ms ease-in-out;
    counter-reset: --card-counter;
		
    /* define grid columns according to which one has hover */
    &:has(:nth-child(1):hover){ --grid-cols: 6fr 1fr 1fr  1fr 1fr 1fr  1fr 1fr 1fr; }
    &:has(:nth-child(2):hover){ --grid-cols: 1fr 1fr 1fr  6fr 1fr 1fr  1fr 1fr 1fr; }
    &:has(:nth-child(3):hover){ --grid-cols: 1fr 1fr 1fr  1fr 1fr 6fr  1fr 1fr 1fr; }
    &:has(:nth-child(4):hover){ --grid-cols: 1fr 1fr 1fr  1fr 1fr 1fr  1fr 6fr 1fr; }
   
    
    & > *{
      position: relative;
      overflow: hidden;
      border-radius: 0 0 0 30%/ 0 0 0 50% ;

      &:first-child{
        border-radius: 0 0 0 0/ 0 0 0 200px ;
      }
      corner-shape:notch;
      transition: all 300ms ease-in-out;
      border: var(--border-size) solid var(--border-color);
      background-image: var(--bg-img);
      /* background-size: 800px 100%; */ /* requires fixed width to maintain size and aspect */
		background-size: cover;
      
			/* remove notch from current and next sibling on hover*/
      &:hover,
      &:hover + div{
        border-radius: 0 0 0 0;
      }
    	/* define grid position - each element overlaps by 1 column */
      grid-row: 1;
      &:nth-child(1){ grid-column: 1  / span 3; }
      &:nth-child(2){ grid-column: 3  / span 3; }
      &:nth-child(3){ grid-column: 5  / span 3; }
      &:nth-child(4){ grid-column: 7  / span 3; }

     
      /* image counter - could easily be a title */
     &::after{
       content: counter(--card-counter) ".";
       counter-increment: --card-counter;

       position: absolute;
       top: .5rem;
       left: 1rem;
       font-size: 2rem;
       transition: scale 150ms ease-in-out;
      scale: 0;
	  color: #fff;
      font-family: 'Indivisa Text Sans Black';
     }
      &:hover::after{
        scale: 1;
      }
    }
  }
}
  
  
 /* general styling not relevant for this demo */
 
	
}