/*
-------------------------------------------------------------------------------------------------------------------------
Curry Grid - a 9box interactive grid in CSS inspired by an American curry restaurant site and a larger 18-box version uses it as well but has JS in a code box on that page.
Darryl's pure CSS GRIDBOX version - 9 block: 3x3
*/

/*.ddw-grid-9 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  --gap: 1rem;
  gap: var(--gap);
  width: 600px;
  height: 600px;
  position: relative;
  overflow: hidden;
}

.ddw-grid-9-item {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  background: white;
  border-radius: 1rem;
  max-width: unset;
}
*/
.ddw-grid-9-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

#item-1:hover {
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
  z-index: 2;
}
.ddw-grid-9:has(#item-1:hover) {
  #item-2 {
    margin-left: 100%;
    width: 0;
  }
  #item-4 {
    margin-top: 100%;
    height: 0;
  }
  #item-5 {
    margin-left: 100%;
    margin-top: 100%;
    width: 0;
    height: 0;
  }
} 

#item-2:hover {
  margin-left: -50%;
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-2:hover) {
  #item-1,
  #item-4 {
    width: 50%;
  }
  #item-3,
  #item-6 {
    width: 50%;
    margin-left: 50%;
  }
  #item-5 {
    height: 0;
    margin-top: 100%;
  }
}

#item-3:hover {
  margin-left: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-3:hover) {
  #item-2 {
    width: 0;
  }
  #item-6 {
    margin-top: 100%;
    height: 0;
  }
  #item-5 {
    margin-top: 100%;
    width: 0;
    height: 0;
  }
}

#item-4:hover {
  margin-top: -50%;
  width: calc(200% + var(--gap));
  height: 200%;
}
.ddw-grid-9:has(#item-4:hover) {
  #item-1,
  #item-2 {
    height: 50%;
  }
  #item-7,
  #item-8 {
    height: 50%;
    margin-top: 50%;
  }
  #item-5 {
    width:0;
    margin-left: 100%;
  }
}

#item-5:hover {
  margin-left: -50%;
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-5:hover) {
  #item-4,
  #item-7 {
    width: 50%;
  }
  #item-6,
  #item-9 {
    width: 50%;
    margin-left: 50%;
  }
  #item-8 {
    height: 0;
    margin-top: 100%;
  }
}


#item-6:hover {
  width: calc(200% + var(--gap));
  height: 200%;
  margin-top: -50%;
  margin-left: calc(-100% - var(--gap));
}
.ddw-grid-9:has(#item-6:hover) {
  #item-2,
  #item-3 {
    height: 50%;
  }
  #item-8,
  #item-9 {
    margin-top: 50%;
    height: 50%;
  }
  #item-5 {
    width: 0;
  }
}

#item-7:hover {
  margin-top: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-7:hover) {
  #item-4 {
    height: 0;
  }
  #item-5 {
    margin-left: 100%;
    width: 0;
    height: 0;
  }
  #item-8 {
    margin-left: 100%;
    width: 0;
  }
}

#item-8:hover {
  margin-left: -50%;
  margin-top: calc(-100% - var(--gap));
  width: 200%;
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-8:hover) {
  #item-4,
  #item-7 {
    width: 50%;
  }
  #item-5 {
    height: 0;
  }
  #item-6,
  #item-9 {
    margin-left: 50%;
    width: 50%;
  }
}

#item-9:hover {
  margin-left: calc(-100% - var(--gap));
  margin-top: calc(-100% - var(--gap));
  width: calc(200% + var(--gap));
  height: calc(200% + var(--gap));
}
.ddw-grid-9:has(#item-9:hover) {
  #item-5 {
    width: 0;
    height: 0;
  }
  #item-6 {
    height: 0;
  }
  #item-8 {
    width: 0;
  }
}