#project .image .visual.parallax {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  /*position: relative;*/
  margin-left: calc(-1 * ((100vw - 1360px) / 2));
  overflow: clip;
}

.parallax .move {
  /*position: absolute;*/
  width: 100vw;
  height: 200vh;
  overflow: hidden;
  background: url(../images/winter-2024/fig7.jpg) #fff center center no-repeat;
  background-size: cover;
  animation: parallax linear forwards;
  animation-timeline: scroll();
  animation-range: enter exit;
}

@keyframes parallax {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-100%);
  }
}

#project .grid {
    display: grid;
    width: 100%;
    height: auto;
    aspect-ratio: auto; 
    gap: 24px;
    gap: attr(gap px, 24px);  
    /*grid-template-columns: auto;*/
    /*grid-template-rows: auto;*/
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "icon1 icon1 icon2 icon3 icon4"
      "icon1 icon1 icon5 icon6 icon6"
      "icon7 icon8 icon9 icon6 icon6";
}

#project .grid div {
  aspect-ratio: 1/1;
  background-color: #e8e8e8;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

#project .visual .grid.image div img {
  width: auto;
}

#project .grid div img {
  max-width: 75%;
  max-height: 75%;
  margin: auto;
}

#project .grid .icon1 { grid-area: icon1; }
#project .grid .icon2 { grid-area: icon2; }
#project .grid .icon3 { grid-area: icon3; }
#project .grid .icon4 { grid-area: icon4; }
#project .grid .icon5 { grid-area: icon5; }
#project .grid .icon6 { grid-area: icon6; }
#project .grid .icon7 { grid-area: icon7; }
#project .grid .icon8 { grid-area: icon8; }
#project .grid .icon9 { grid-area: icon9; }

#project .grid .icon1 img, #project .grid .icon6 img { max-width: 85%; max-height: 85%; }


@media only screen and (max-width: 768px) {
  #project .grid {
    gap: 12px;
    padding: 0;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    grid-template-areas:
      "icon1 icon1 icon1 icon1 icon1 icon1"
      "icon2 icon2 icon2 icon3 icon3 icon3"
      "icon4 icon4 icon5 icon5 icon9 icon9"
      "icon7 icon7 icon7 icon8 icon8 icon8" 
      "icon6 icon6 icon6 icon6 icon6 icon6";
  }
}