/* //galler3danimation  */
  .gallery{
    position:relative;
    width:300px;
    height:160px;
    transform-style:preserve-3d;
    animation:rotate 35s linear infinite;
  }
  
  @keyframes rotate{
    from{
      transform:perspective(1200px) rotateY(0deg);
    }
    
    to{
      transform:perspective(1200px) rotateY(360deg);
    }
  }
  
  .gallery span{
    position:absolute;
    width:100%;
    height:100%;
    transform-origin:center;
    transform-style:preserve-3d;
    transform:rotateY(calc(var(--i) * 45deg)) translateZ(380px);
  }
  
  .gallery span img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
  }
  /* .galleryStylesCont{
    width: 100%;
    background: url(./image/gamePage2/bgForRoundImage\.jpg);
    height: 50vh;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover
  }
*/
  @media screen and (max-width: 650px) {
  .gallery{
    width: 288px;
    height: 131px;
  }
  } 

  /* //gallerytriangle */
  .gallerytriangle {
    --s: 170px; /* control the size */
    display: grid;
    grid: auto-flow var(--s) / repeat(2,var(--s));
    gap: 10px;
    place-items: center;
    margin: calc(var(--s)/2);
    transform: rotate(45deg);
  }
  .gallerytriangle > img {
    width: 141%; /* sqrt(2)*100% */
    aspect-ratio: 1;
    object-fit: cover;
    /* filter: grayscale(80%); */
    transform: scale(var(--_t,1)) rotate(-45deg);
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
    cursor: pointer;
    transition: .2s linear;
  }
  .gallerytriangle > img:hover {
    /* filter: grayscale(0); */
    --_t: 1.15;
  }

  /* //gallercircle */
  /* .gallerycircle {
    --s: 200px; 
    --g: 8px;   
    
    display: grid;
    grid: auto-flow var(--s)/repeat(2,var(--s));
    gap: var(--g);
  }
  .gallerycircle > img {
    width: 100%; 
    aspect-ratio: 1;
    cursor: pointer;
    filter: grayscale();
    z-index: 0;
    transition: .25s,z-index 0s .25s;
  }
  .gallerycircle > img:hover {
    width: calc(200% + var(--g));
    filter: grayscale(0);
    z-index: 1;
    --_c: 50%;
    transition: .4s,z-index 0s;
  }
  .gallerycircle > img:nth-child(1){
    clip-path: circle(var(--_c,55% at 70% 70%));
    place-self: start;
  }
  .gallerycircle > img:nth-child(2){
    clip-path: circle(var(--_c,55% at 30% 70%));
    place-self: start end;
  }
  .gallerycircle > img:nth-child(3){
    clip-path: circle(var(--_c,55% at 70% 30%));
    place-self: end start;
  }
  .gallerycircle > img:nth-child(4){
    clip-path: circle(var(--_c,55% at 30% 30%));
    place-self: end;
  }
   */